Question

我是JavaScript和jQuery的新手。你能不能给我一些指导，说明为什么我不能展示下一个元素。

HTML结构

<div class="questionContainer">

    <div class="question">
         How much storage do you need?
    </div>

     <div class="answers">
         <ul>
             <li>
                 <label>
                     <input type="radio" id="storage">1GB or less
                 </label>
             </li>

             <li>
                 <label>
                     <input type="radio" id="storage">More than 1GB
                 </label>
             </li>  
         </ul>
     </div>

     <div class="btnContainer">
         <div class="next">
             <a class="btnNext">Next</a>
         </div>
     </div>
</div>

现在我有四个.questionContainer，每个都包含相同的html标记结构，我隐藏了除第一个之外的所有内容，当点击下一个时，我希望显示下一个问题并隐藏当前的内容。我试过这个javascript

的JavaScript

(function(){

    var Questions = {

        init : function() {

            var container = $('.questionContainer');

            container.not(':first').hide();

            container.find('a.btnNext').on('click', function(){

                $(this).closest('.questionContainer').next().siblings().show();
            })
        }

    };

    Questions.init();

})();

问题在于，它不是仅显示点击下一个.questionContainer，而是全部显示。请帮忙！

Answer 1

使用siblings()方法，您明确选择全部。只是做：

$(this).closest('.questionContainer').next().show();

jQuery试图显示下一个元素

1 个答案: