jQuery: выбрать элементы с именами по возрастающим идентификаторам? - PullRequest
Новая
       16

jQuery: выбрать элементы с именами по возрастающим идентификаторам?

0 голосов
/ 29 ноября 2010

и заранее спасибо за помощь!

Вот моя ситуация: у меня есть набор div, чьи идентификаторы имеют возрастающее число, примененное к концу имени с помощью PHP.Каждый из этих div'ов динамически добавляется с помощью PHP (это серия вопросов и ответов со скрытым контейнером div с ответами, которые скользят вниз при нажатии на вопрос.) [Live Example] [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)')...
}

Надеюсь, это достаточно ясно для вас!Опять же, заранее благодарю.:)

Ответы [ 2 ]

1 голос
/ 29 ноября 2010

Лучший способ справиться с этим - не использовать идентификаторы, а использовать классы для внешнего элемента.Таким образом, ваш 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 будет переписан с помощью селектора для класса «question». 

$(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.

Edit Iскорректировал код PHP, чтобы использовать класс для «slidetoggle» вместо идентификатора.Технически это ошибка HTML, когда несколько идентификаторов совпадают.Это может отбросить некоторые вспомогательные технологии для людей с ограниченными возможностями.Я предполагаю, что этот раздел кода был повторен на странице несколько раз.

0 голосов
/ 29 ноября 2010

Без изменения текущей разметки это будет работать: 

// 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, я бытакже рекомендуем назначить отдельный класс CSS для внешнего DIV и использовать его в качестве селектора вместо $("div[id=^faqwrap]").

...