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