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

Question

提前感谢您的帮助！

这是我的情况：我有一组 div，其 ID 使用 PHP 在名称末尾应用了一个递增的数字。这些 div 中的每一个都是使用 PHP 动态添加的（它们是一系列常见问题解答问题，其中包含一个带有答案的隐藏 div 容器，单击问题时会向下滑动。）[Live Example][1]

页面上出现的问题数量没有限制，因为这是用于 Wordpress 主题，而我的客户希望在进行过程中添加新问题。

以下是使用 PHP 的每个 FAQ 问题的结构示例：

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

现在这是我目前在 jQuery 中的内容，它可以工作，但前提是我每次客户想要添加新问题时都添加一个新问题。

$(document).ready(function() {
 $('.slidebox*').hide();

// toggles the slidebox on clicking the noted link
   $("#faqwrap1 a:not(div.slidebox a)").click(function() {
      $("#faqbox1.slidebox").slideToggle('normal');
      $('div.slidebox:not(#faqbox1)').slideUp('normal');

return false;
     });
});

我想也许可以用声明的变量做一些事情，像这样：

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

我希望这对你来说已经足够清楚了！再次，我提前感谢您。 :)

Answer 1

处理这个问题的最佳方法是不使用 ID，而是使用类作为外部元素。所以你的 PHP 会这样改变：

<?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 将被“问题”类的选择器重写。

$(document).ready(function() {      
 $('.slidebox*').hide();      

 // toggles the slidebox on clicking the noted link      
 $(".question a:not(div.slidebox a)").click(function() {
    /* close everything first */
    $('div.slidebox').slideUp('normal');      
    /* selects and opens the the slidebox inside the div */
    $(".slidebox", this).slideToggle('normal');

    return false;      
 });      
});      

这将为您带来您想要的效果。 JQuery 的主要区别在于您在被点击的问题中获取滑动框的方式。我正在使用范围选择 $(".slidebox", this) 来获取单击的“.question”元素内的滑动框。

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

编辑 我调整了 PHP 代码以使用“slidetoggle”类而不是 id。拥有多个相同的 ID 从技术上讲是 HTML 错误。它可以为残疾人提供一些辅助技术。我假设该部分代码在页面上重复了多次。

Answer 2

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

// 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]")。