从无序列表中获取所点击的值

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>

- JJLX

---

价值？你是指 text() 吗？ - evolutionxbox

$(this).find("p").text(); - Satpal

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())
});

预期值反映在第一个具有类 reasons_top_item 的 li 上。

- Shubham

---

太好了！非常感谢。你能告诉我如何将它放入会话存储中，并且只保留一个项目吗？谢谢！ - JJLX

嗨@Veen，这是一个带有本地存储的新fiddle链接： https://jsfiddle.net/ash06229/4mqbcgfx/1/ - Shubham

谢谢！还有一个问题，您知道如何获取具有其类的<i>元素并将其存储在变量中吗？ - JJLX

Answer 2

将您的jQuery函数更改为以下内容：

$(".reasons_items").click(function () {
    $(this).toggleClass("reasons_items_click");
    var clicked_text = $(this).find("p").text();
    // clicked_text variable will have the value of clicked <li>
});

希望这能帮到你。

- Himanshu Upadhyay

Answer 3

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

这将在li标签内打印您的文本

- bankaujjwal

Answer 4

使用 .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
    );
});

- Rohan Kumar

Answer 5

在click函数中使用类似于$(this).find("p").text(); 的东西。您可以将其分配给全局变量并稍后将其传递到存储器中，也可以直接在那里设置。

- S.Dan

Answer 6

你可以像其他人建议的那样，直接从 p 中取出文本。但是你正在创建一个类似于 option 元素的元素，因此我建议采用同样的方法。 使用 data-value 来获取你的理由/选项的值，例如：

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

- Winni

---

document.getElementById("reasons_items").value似乎无法输出数据值？ - JJLX

当然，那是不同的事情，你需要使用 dataset 属性。在 MDN 上查看更多信息。 - Winni