Question

我是jQuery的初学者，这个让我很难过。我正在使用遗留的PHP智能模板，因此我使用的html必须遵循以下格式：

<div class="container">
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div1">1</div>
    <div class="exampleClass div2">2</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div3">3</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div4">4</div>
</div>
<div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div5">5</div>
    <div class="exampleClass div6">6</div>
</div>

我想要发生的是，当我点击其中一个带有“exampleClass”类的div时，所有相应的p元素都会收到一个活动类。

例如，我单击第3个“exampleClass”div：<div class="exampleClass div3">3</div>。活动类将从所有p元素中删除，标记为<p class="exampleP p3"></p>的所有p元素将获得“活动”类。

这是我目前的jQuery代码：

    jQuery('.exampleClass').click(function(){
    jQuery('p').removeClass("active");
    var indexNumber = jQuery(this).index('.exampleClass');  
    jQuery('p').eq(indexNumber).addClass("active");
});

这仅适用于带有“block”类的第一个div的子p元素。我需要它用于所有带有“块”类的div中的所有子p元素。我觉得我很接近，但我似乎已经尝试了很多不同的方式而没有运气。

非常感谢任何帮助。

由于

Answer 1

只需替换以下代码：

jQuery('p').eq(indexNumber).addClass("active");

使用：

var indexNumber = jQuery(this).html();  
jQuery('p.p' + indexNumber).addClass("active");

<强>段

＆＃13;

jQuery('.exampleClass').click(function(){
  jQuery('p').removeClass("active");
  var indexNumber = jQuery(this).html();  
  jQuery('p.p' + indexNumber).addClass("active");
});

＆＃13;

.active {color: blue; background-color: blue;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="container">
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div1">1</div>
    <div class="exampleClass div2">2</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div3">3</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>
    <div class="exampleClass div4">4</div>
  </div>
  <div class="block">
    <div class="header">
    </div>
    <p class="exampleP p1"></p>
    <p class="exampleP p2"></p>
    <p class="exampleP p3"></p>
    <p class="exampleP p4"></p>
    <p class="exampleP p5"></p>
    <p class="exampleP p6"></p>

    <div class="exampleClass div5">5</div>
    <div class="exampleClass div6">6</div>
  </div>
</div>

＆＃13;

Answer 2

您需要遍历block元素

 jQuery('.exampleClass').click(function(){
    jQuery('p').removeClass("active");
    var indexNumber = jQuery(this).index('.exampleClass');  
     jQuery('.block').each(function(){
          jQuery(this).find("p").eq(indexNumber).addClass("active");
            });

});

Fiddle

Answer 3

找到父母
查找父母的所有子女.exampleP
addClass()

$('.exampleClass').click(function(){
  $('p').removeClass('active';)
  $(this).parents('.block').find('.exampleP').each(function(){    
     $(this).addClass('active');
  })
})

Answer 4

您可以执行以下操作

jQuery('.exampleClass').click(function(){
    jQuery('.exampleP').removeClass("active"); // remove active class
     var elClasses = jQuery(this).attr("class").split(' '); // get the classes of clicked div
     for (var i = 0; i < elClasses.length; i++) { // iterate over classes
         if(elClasses[i].indexOf("div") === 0) { // get the class which starts with div
             jQuery(".p" + elClasses[i].substring(3)).addClass("active"); // add active class to corresponding p elements
             break;
         }
     }
});

供参考 - http://plnkr.co/edit/IfbK3dpE38lOQ3XYT90y?p=preview

Answer 5

保持简单......这是一个解决方案：

$(function(){
$('p').click(function(){
    $('p').removeClass('active');
    $(this).addClass('active');
});
});

您可以在此处进行测试：http://jsfiddle.net/leojavier/wyqrvsje/

在不同父级JQuery

5 个答案: