用jQuery返回多个属性值

Question

我有一个网页，允许用户滚动浏览回答问题。 为了显示他们的答案，他们只需单击一个通过jquery更改onclick类的li即可显示已选择答案。 在某些问题中，我只允许选择一个答案（单击一个li），而在其他问题上，则允许选择多个答案。 问题完成后，用户单击“提交”，然后jquery使用“ answerPick”类获取data-url属性的值，并将其追加到网站URL进行导航。

我的问题是，我用来选择“ answerPick”类的属性的方法仅返回第一个值（ppl选择多个值时出现此问题）。

$(document).ready(function() {


  $('#section-a .answer, #section-b .answer').on('click', function() {
    if ($(this).siblings().hasClass("answerPick") == false) {
      $(this).toggleClass('answer answerPick');
    }

  });

  $('#section-c .answer, #section-d .answer').on('click', function() {
    $(this).toggleClass('answer answerPick');
  });


  $('#submittah').click(function() {
    var q1 = $('#section-a').find('.answerPick').attr('data-url');
    var q2 = $('#section-b  .answerPick').attr('data-url');
    var q3 = $('#section-c  .answerPick').attr('data-url');
    var q4 = $('#section-d  .answerPick').attr('data-url');
    var finalURL = q1 + q2 + q3 + q4;
    window.location.href = finalURL;
  });


});

这是我的jsfiddle https://jsfiddle.net/gchis66/xorpyj82/

有任何想法吗？

Answer 1

这不会重定向页面，但会控制台退出最终查询（打开开发人员工具并查看控制台），或者如果愿意的话，将console.log更改为alert() 。是否要传递值带有指向下一页的键（我已经更新了finalURL以包含值对的键）。 要回答有关多个答案的问题，您想遍历多个选定的类，并将它们推入数组，然后将它们作为逗号分隔的列表加入。 尽管在发送位置答案时可能需要对URL进行编码，具体取决于您如何从URL中检索键/值参数。

 $(document).ready(function() { $('#section-a .answer, #section-b .answer').on('click', function() { if ($(this).siblings().hasClass("answerPick") == false) { $(this).toggleClass('answer answerPick'); } }); $('#section-c .answer, #section-d .answer').on('click', function() { $(this).toggleClass('answer answerPick'); }); $('#submittah').click(function() { var q1 = $('#section-a').find('.answerPick').attr('data-url'); var q2 = $('#section-b .answerPick').attr('data-url'); var q3Multi = []; var q3 = $('.answerPick', '#section-c').each(function() { q3Multi.push($(this).attr('data-url')); }); var q4Multi = []; var q4 = $('#section-d .answerPick').each(function() { q4Multi.push($(this).attr('data-url')); }); var finalURL = '?q1=' + q1 + '&q2=' + q2 + '&q3=' + q3Multi.join(',') + '&q4=' + q4Multi.join(','); console.log(finalURL); // window.location.href = finalURL; }); }); 

 /* Core Styles */ body { margin: 0; text-align: center; line-height: 1.5; } h1, h2, h3 { padding: 1em 0 !important; } .btn { padding: 1em 2em; color: #000; text-decoration: none; background: #92c03c; border: 1px solid #494949; display: inline-block; margin: .5em 0; } /* Header Styles */ #showcase { min-height: 450px; } #showcase h1 { margin-top: 25px; } /* Section Styles */ #main section { display: block; min-height: 450px; } #submission { margin-top: 30px; } /* List Item Styles */ #main li { display: inline-block; cursor: pointer; text-align: center; border: solid 4px #fff; width: 140px; height: 140px; -moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; position: relative; color: #fff; } #main li>span { display: flex; justify-content: center; padding-top: 40%; } .answer { background: #1bb8d1; } .answerPick { background: #92c03c; } /* Media Queries */ @media(min-width:700px) { #showcase h1 { font-size: xx-large; } #showcase p { font-size: medium; } #main h2 { font-size: xx-large; } #main li { font-size: large; } .btn { padding: 2em 4em; font-size: medium; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Header --> <header id="showcase" class="grid"> <h1>Example</h1> <p> Example txt</p> <a href="#section-a" class="btn">Get Started</a> </header> <!--Main Area --> <main id="main"> <!--Section A --> <section id="section-a"> <div class="content-wrap"> <h2 class="content-title">Is this gift for a woman or man?</h2> <ul class="answer-options"> <li class="answer" data-url="man"><span>Man</span></li> <li class="answer" data-url="woman"><span>Woman</span></li> </ul> </section> <!--Section B--> <section id="section-b" class="grid"> <div class="content-wrap"> <h2 class="content-title">What is the goal of the gift?</h2> <ul class="answer-options"> <li class="answer" data-url="relaxation"><span>Relaxation</span></li> <li class="answer" data-url="skincare"><span>Skincare</span></li> <li class="answer" data-url="date-night"><span>Date Night</span></li> <li class="answer" data-url="at-home-spa"><span>At home spa</span></li> <li class="answer" data-url="beard-care"><span>Beard Care</span></li> </ul> </section> <!--Section C--> <section id="section-c" class="grid"> <div class="content-wrap"> <h2 class="content-title">Price Point</h2> <ul class="answer-options"> <li class="answer" data-url="0-5"><span>$5 or lower</span></li> <li class="answer" data-url="5-10"><span>$5-$10</span></li> <li class="answer" data-url="10-20"><span>$10-$20</span></li> <li class="answer" data-url="20-50"><span>$20-$50</span></li> </ul> </section> <!--Section D--> <section id="section-d" class="grid"> <div class="content-wrap"> <h2 class="content-title">Any other preferences?</h2> <ul class="answer-options"> <li class="answer" data-url="cruelty-free"><span>Cruelty Free</span></li> <li class="answer" data-url="vegan"><span>Vegan</span></li> <li class="answer" data-url="gluten-free"><span>Gluten Free</span></li> <li class="answer" data-url="fragrance-free"><span>Fragrance Free</span></li> </ul> <div id="submission"> <button id="submittah" class="btn">Submit</button> </div> </section> </main> 

Answer 2

使用jQuery的每个函数： http : //api.jquery.com/jquery.each/

这将循环所有元素。