Question

并提前感谢您的帮助！

这是我的情况：我有一组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>

现在这就是我目前在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]")。

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

2 个答案: