Question

我如何获得所选项目的价值/原因？我想将此值存储在变量中，并将其放在sessionStorage中以供下一页使用。我想有一个更好的方法可以做到这一切，但我不知道如果有，请告诉我！

我对JS很陌生，并且会对如何处理这个问题有一些总体方向。谢谢。

$(".reasons_items").click(function() {
  $(this).toggleClass("reasons_items_click");
});

ul.reasons_menu li.reasons_items {
  width: 50%;
  float: left;
  text-align: center;
  color: #fff;
  padding: 5px 0;
  border-top: 1px solid #596467;
  border-right: 1px solid #596467;
  border-left: 1px solid #596467;
  border-bottom: 1px solid #596467;
  height: 120px;
  cursor: pointer;
  background-color: #0192C9;
  position: relative;
  z-index: 1;
}

ul.reasons_menu li.reasons_items:hover,
ul.reasons_menu.reasons_items.reasons_items_click {
  background: #fff;
  color: #333333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="reasons_menu">
  <li class="reasons_top_item">
    <h2>Why</h2>
  </li>
  <li class="reasons_items">
    <p>Reason 1</p><i class="fa fa-database fa-3x"></i></li>
  <li class="reasons_items">
    <p>Reason 2</p><i class="fa fa-handshake-o fa-3x"></i></li>
  <li class="reasons_items">
    <p>Reason 3</p><i class="fa fa-users fa-3x"></i></li>
  <li class="reasons_items">
    <p>Reason 4</p><i class="fa fa-line-chart fa-3x"></i></li>
</ul>

Answer 1

您好，这是解决问题的另一种方法。工作小提琴：https://jsfiddle.net/ash06229/4mqbcgfx/

$(".reasons_items").click(function () {
    $('.reasons_items').removeClass("reasons_items_click");
    $(this).addClass("reasons_items_click");
    $('.reasons_top_item h2').text($('.reasons_items_click p').text())
});

预期值反映的是第一个 li ，其类别为 reason_top_item 。

Answer 2

更改您的jquery函数，如下所示：

data

希望这会有所帮助。

Answer 3

在$(this).find("p").text();函数中使用click之类的内容。您可以将其分配给全局变量并稍后将其传递给存储，也可以将其自行设置。

Answer 4

$(".reasons_items").click(function () {
    $(this).toggleClass("reasons_items_click");
    console.log($(this).find("p").text());
});

这将在li

中打印文本

Answer 5

使用.find()获取子p元素的文本，并sessionStorage.setItem()将其设置为下一页，例如

$(".reasons_items").click(function () {
    sessionStorage.setItem('reason', //seeting key for sessionstorage
          $(this).toggleClass("reasons_items_click") // toggle class
                 .find("p") // get p element
                 .text() // get text
    );
});

Answer 6

您可以像其他人所说的那样从p获取文字。但是你正在制作一个重新组合option元素的元素，所以我建议采用相同的方法。使用data-value获取您的原因/选项的值，如下所示：

<li class="reasons_items" data-value="Reason1"><p>Reason 1</p><i class="fa fa-database fa-3x"></i></li>

从无序列表中获取单击的值

6 个答案: