找到具體的錨標記，更換上點擊數據屬性附加傷害

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 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 3

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

這個答案是基於我收到the question I asked試圖實施該解決方案