javascript - 查找特定的锚标记并在点击时替换数据属性

Question

我有以下页面结构

<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 -->            
})

单击时，将锚标记内的数据属性替换.article-play为文章内的类，类.playing从data-play="3"到data-pause="4"，但是以某种方式检查是否存在data-play="3"，单击时将其替换为data-pause="4"否则，如果存在data-pause="4"则将其替换为data-play="3"

Answer 1

$(".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');
    }
});

Answer 2

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);
        }
    }
});

Answer 3

我相信以下应该有效（未经测试）：

var dataPlay = $(".playing a.article-play").data("play");
var dataPause = $(".playing a.article-play").data("pause");

if (dataPlay == "3") {
    $(".playing a.article-play").removeAttr("data-play").attr("data-pause", "4");
} else if (dataPause == "4") {
    $(".playing a.article-play").removeAttr("data-pause").attr("data-play", "3");
}

Answer 4

我认为您可以将处理pause的方法与处理的方法分开play

简化的 HTML

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

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

</div>

JS

$(".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");
});

jsFiddle

此答案基于我在尝试实施此解决方案时提出的问题的答案