Javascript 找到特定的锚定标记并单击替换数据atribute

我有下面的页面结构

<div class="main">
   <article class="article">
   <!-- ... -->
      <div class="article-footer>
         <ul>
            <li><a href="#" class="article-play" data-play="3" data-src="http://..."></a></li>
            <li>...</li>
            <!-- ... -->
         </ul>
      </div>
   </article>

   <article class="article playing"> <!-- Notice Additional Class .playing
   <!-- ... -->
      <div class="article-footer>
         <ul>
            <li><a href="#" class="article-play" data-play="3" data-src="http://..."></a></li>
            <li>...</li>
            <!-- ... -->
         </ul>
      </div>
   </article>

   <!-- ... -->

</div>

所以我想做的是，在这个单击函数中：

$(".audiojs .play-pause").click(function() {

  <!-- Code Here -->            
})

$（.audiojs.play pause”）。单击（函数（）{
})

---

单击将锚定标记内的数据属性替换为class

。文章播放

，即类为class

的文章内的内容。将

从

data play=“3”

播放到

data pause=“4”

，但它会检查是否存在

data play=“3”

，然后单击将其替换为

data pause=“4”

如果有

数据暂停=“4”

则将其替换为

数据播放=“3”

我认为以下方法应该有效（未经测试）：

---

我认为您可以将处理

pause

的方法与处理

play

简化HTML

<div class="playing">
    <div id="output"></div> 

    <a href="#" class="article-play" data-play="4">click</a>

</div>

---

此答案基于我在尝试实施此解决方案时从页面源代码中收到的答案，我没有看到任何元素满足选择器

“.audiojs.play pause”

。您实际想做什么？这让人觉得你把问题弄得比实际需要的更复杂了。@Jack她没有看到，我相信没有important@Alnitak我正在使用带有数据属性的图标字体。我不能简单地更改值，比如说data icon=“3”和data icon=“4”，因为我需要它们是用于样式设置的单独属性。设置为仅以一种方式工作，删除数据播放并设置数据暂停，但在另一种方式单击时，什么都不会发生。

$(".audiojs .play-pause").click(function() {
    var element = $('.playing .article-play')
    var play = element.attr('data-play')
    var pause = element.attr('data-pause')
    if(play == '3'){
        element.removeAttr('data-play');
        element.attr("data-pause",'3');
    }else if(pause == '4'){
        element.removeAttr('data-pause');
        element.attr("data-play",'4');
    }
});

var a = $("article.playing a.article-play")
a.each(function(){
    var playAttr = $(this).attr("data-play")
    var pauseAttr = $(this).attr("data-pause")
    if(playAttr){
        if(playAttr == "4"){
            $(this).removeAttr("data-play");
            $(this).data("pause",3);
        }
    }
    if(pauseAttr){
        if(pauseAttr == "3"){
            $(this).removeAttr("data-pause");
            $(this).data("play",4);
        }
    }
});

<div class="playing">
    <div id="output"></div> 

    <a href="#" class="article-play" data-play="4">click</a>

</div>

$(".playing").on("click", ".article-play[data-pause]", function () {
    $(this).removeAttr("data-pause");
    $(this).attr("data-play", 4);

    $("#output").text("playing 4");
});

$(".playing").on("click", ".article-play[data-play]", function () {
    $(this).removeAttr("data-play");
    $(this).attr("data-pause", 3);

    $("#output").text("pausing 3");
});