查找特定的锚标签并在点击时替换数据属性 [英] Find specific anchor tag and replace data atribute on click

问题描述

我有以下页面结构

 < div class =main> 
< article class =article> 
<！ -  ...  - > 
< div class =article-footer> 
< ul> 
< li>< a href =＃class =article-playdata-play = 3data-src =http：// ...>< / a>< / li> 
< li> ...< / li> 
< ;! -  ...  - > 
< / ul> 
< / div> 
< / article> 
 
< article class =文章播放><！ -  Notice Notice Additional Class .playing 
<！ -  ...  - > 
< div class =article-footer> 
< ul> 
< li>< a href =＃class =article-playdata-play =3data-src =http：// ...>< / a> < /锂> 
< li> ...< / li> 
<！ -  ...  - > 
< / ul> 
< / div> 
< / article> 
 
<！ -  ...  - > 
 
< / div> 
  

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

  $（。audiojs .play-pause）。click（function（）{
 
 < - > 
}）
  

点击将标签内的数据属性替换为< c $ c> .article-play 这是类内部文章 .play from data-play =3 到 data-pause =4，但是通过检查是否存在 data-play = 3比单击将其替换为 data-pause =4否则如果存在 data-pause = 4比替换为 data-play =3

解决方案

  $（。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.r emoveAttr（'data-play'）; 
 element.attr（data-pause，'3'）; 
} else if（pause =='4'）{
 element.removeAttr（'data-pause'）; 
 element.attr（data-play，'4'）; 
} 
}）; 
  

I have following page structure

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

So what I want to do is, inside this click function:

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

  <!-- Code Here -->            
})

on click replace data attribute inside anchor tag with class .article-play that is inside article with class .playing from data-play="3" to data-pause="4" , However in a way that it checks that if there is data-play="3" than on click replace it with data-pause="4" else if there is data-pause="4" than replace it to data-play="3"

解决方案

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

这篇关于查找特定的锚标签并在点击时替换数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！