Question

我编写了很长的html代码：

<div id="el">
    <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p
    <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p
    <p data-skip>Blablabla</p> // On click, toggle this, and toggle next p
    <p><span>1<span><span>2</span></p> // On SPAN click, toggle this p, and toggle next p
    <p data-skip>Blablabla</p>// On click, toggle this, and toggle next p
    <p><span>1<span><span>2</span></p>// On SPAN click, toggle this p, and toggle next p
</div>

只有第一个p有显示块，其他p没有显示。

当我单击div时，如果可见的p具有跳过数据的属性，那么我想对其进行切换，然后再切换。但是，如果可见p尚未跳过数据，则用户必须单击跨度以切换可见p并切换下一个p。

所以我编写了该代码：

$('#el').has('p[data-skip]').click(function() {
    var visible = $('#el p:visible');
    visible.toggle();
    $('#el p).eq(visible.index() + 1).toggle();
});

它工作正常，例如，如果我通过p [data-test]更改p [data-skip]，它将停止工作。

但是，当p没有数据跳过属性而是只有跨度时，我仍然可以点击它-_-

因此，如果我切换.has（'p [data-blablabla']），click（）函数将停止工作，但是如果元素没有属性，它将工作...

您能解释一下我的错误吗？

请不要告诉我使用.hasClass（）将class-skip替换为data-skip，它可以工作，但我想使用data-：）

Answer 1

在<p>没有<p>的情况下，最好听data-skip元素并检查目标。

var $para = $('#el p').click(function(e){
   var $p = $(this);
   var $next = $p.is($para.last()) ? $p.next() : $para.first();
   
   // do nothing if not a `data-skip` and span not clicked
   if(!$p.is('[data-skip]') && !$(e.target).is('span')){
      return; 
   }else{
      $p.add($next).toggle()
   }       
});

#el p:not(:first-child){display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="el">
    <p data-skip>First</p> 
    <p data-skip>Second</p>
    <p data-skip>Third</p>
    <p><span>1<span><span>2</span></p>
    <p data-skip>Forth</p>
    <p><span>3<span><span>4</span></p>
</div>

jQuery .has（）和.click（）函数问题

1 个答案: