Question

我有一个网页，允许用户滚动回答问题。要显示他们的答案，他们只需单击一个li，通过jquery更改类onclick以显示已选择答案。在其中一些问题中，我只允许选择单个答案（单击一个li），而在其他问题上我允许单击多个。问题完成后，用户点击提交，jquery使用＆＃34; answerPick＆＃34;取得data-url属性的值。上课并附加到网站网址以导航到。

我的问题是我用来选择＆＃34; answerPick＆＃34;的属性的方法。 class只返回第一个值（当ppl选择多个值时出现问题）。

>>> df.head(4)

                         localtime  symbol exchange   price  size
NaN                      localtime  symbol     exch   price  size
 0   2017-08-01 13:30:00.130514241    AAPL     NSDQ  149.08    71
 1   2017-08-01 13:30:00.148672863    AAPL     NSDQ  149.05    33
 2   2017-08-01 13:30:00.148695312    AAPL       BX  149.05    45

这是我的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/

这将循环所有元素。

使用jquery返回多个属性值

2 个答案: