Variables jQuery：选择ID名称递增的元素？

提前感谢你的帮助

以下是我的情况：我有一组div，它们的id使用PHP将递增的数字应用到名称的末尾。这些div中的每一个都是通过PHP动态添加的（它们是一系列FAQ问题，带有一个隐藏的div容器，其中包含答案，单击问题时会向下滑动。）[实时示例][1]

页面上出现的问题数量没有限制，因为这是一个Wordpress主题，我的客户希望添加新的问题

下面是使用PHP的每个常见问题解答问题的结构示例：

<?php var $faqnum = 0; $faqnum++; ?>
<div id="faqwrap<?php $faqnum; ?>">   
    <h4><a href="#faq<?php $faqnum; ?>" id="slidetoggle">What data is shared?</a></h4>   
     <div id="faqbox<?php $faqnum; ?>" class="slidebox">
        <p>Data sharing is defined by the type of service:</p>
        <ul class="list">
            <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li>
            <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li>
            <li>Participation in a service requires the member to provide associated data<br />
      </ul>
    </div>
    </div>

我想用一个声明的变量做一些事情，比如：

for (var x = 0; x < 100; x++;) {
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')...
}

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>" class="question">    
    <h4><a href="#faq<?php $faqnum; ?>" class="slidetoggle">What data is shared?</a></h4>    
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
        <p>Data sharing is defined by the type of service:</p> 
        <ul class="list"> 
            <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
            <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
            <li>Participation in a service requires the member to provide associated data<br /> 
       </ul> 
    </div> 
</div> 

（变量x=0；x<100；x++；）{ $（“#[id^=faqwrap]”+x“a:不是（div.slideboxA）”）。。。 }

---

我希望这对你来说足够清楚！再一次，我提前向你表示感谢。：）

处理这个问题的最佳方法是不使用id，而是使用类作为外部元素。因此，您的PHP将进行如下更改：

for (var x = 0; x < 100; x++;) {
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')...
}

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>" class="question">    
    <h4><a href="#faq<?php $faqnum; ?>" class="slidetoggle">What data is shared?</a></h4>    
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
        <p>Data sharing is defined by the type of service:</p> 
        <ul class="list"> 
            <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
            <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
            <li>Participation in a service requires the member to provide associated data<br /> 
       </ul> 
    </div> 
</div> 

这会让你得到你想要的效果。JQuery中的关键区别在于在点击的问题中获取幻灯片盒的方式。我正在使用作用域选择

$（“.slidebox”，this）

仅获取单击的“.question”元素中的slidebox

细微的视觉差异在于slideUp（）发生在slideToggle（）之前。这将在打开所需查询之前关闭所有打开的查询。如果你保持你的动画快，这将是非常好的。这种方法的优点是，您不必担心页面上的问题数量，而且选择器很可能比for循环更优化

编辑

---

我将PHP代码调整为使用一个类来表示“slidetoggle”，而不是一个id。从技术上讲，有多个相同的id是一个HTML错误。它可以为有残疾的人提供一些辅助技术。我假设这段代码在页面上重复了好几次。

在不更改当前标记的情况下，这将起作用：

// toggles the slidebox on clicking the noted link
$("div[id=^faqwrap]").each(function () {
  var $faqwrap= $(this);
  $faqwrap.find("h4 > a").click(function () {
    var $currentSlidebox = $faqwrap.children(".slidebox");
    $currentSlidebox.slideToggle('normal');
    $('div.slidebox').not($currentSlidebox).slideUp('normal');
    return false;
  });
});

也许你可以在上面的代码中找到一些对你有帮助的建议

---

像@Berin一样，我也建议给外部DIV提供一个单独的CSS类，并将其用作选择器，而不是

$（“DIV[id=^faqwrap]”

我很确定您的意思是

class=“slidetoggle”

，而不是在HTML中使用

id=“slidetoggle”

，因为这会导致结果页中出现重复的id。谢谢！我使用了这个解决方案，但正如您和Berin Loritsch所建议的，我只是将选择器更改为$（'div.question'），它可以工作！