Clever Geek Handbook

Get click value from unordered list

How can I get the value / Reason of the selected item? I want to store this value in a variable and throw it into sessionStorage for the next page. I believe there is a much better way to do all this, but I have no idea how, if there is, let me know please!

I am completely new to JS and would appreciate some general guidance on how to approach this. Thank.

$(".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>
Run code


+3


source to share


6 answers


Hi this is a different approach to solving your problem. Working fiddle: 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())
});


The expected value is reflected on the first li , having class prichinam_top_item .

+2


source


Modify jquery function like this:

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


Hope this helps.

+1


source


Use something like $(this).find("p").text();

inside a function click

. You can either assign it to a global variable, pass it later to the repository, or set it there yourself.

+1


source 


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

This will print text inside li

0


source


Use . find () to get the text of the item p

for children and sessionStorage.setItem () to set it for the next page, for example

$(".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
    );
});
0


source


You can just take the text from p

as others suggest. But you are creating an item that collects the item option

and so I suggest the same approach. Use data-value

to get the value of your reasons / parameters like this:

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

0


source






More articles:


All Articles