Clever Geek Handbook

Is it possible to replace onclicks in different "li" tags with one onclick in the "ul" tag?

I am using an asp.net project to build a website.

web page

code

Now I am using the following code for the dropdown.

   <%--    <ul class="SearchTypes">
   <li id="SearchDefaultLbl" class="search-list-type"  onclick="OnClickChangeSearchText(this, 'SearchBoxLbl')">
       <div>Default Search</div>
   </li>
   <li id="SearchLocations" class="search-list-type"  onclick="OnClickChangeSearchText(this, 'SearchBoxLbl')">
       <div>search Books</div>
   </li>
   <li id="SearchDevelopments" class="search-list-type"  onclick="OnClickChangeSearchText(this, 'SearchBoxLbl')">
       <div>search Authors</div>
   </li>
   <li id="Searchpeople" class="search-list-type"  onclick="OnClickChangeSearchText(this, 'SearchBoxLbl')">
       <div>search Genre</div>
   </li>
   </ul>--%>

Java Script Function

   function OnClickChangeSearchText(_elem,_elemLbl)
   {
    var div = document.getElementById("SearchPopup");
    var Lbl = document.getElementById(_elemLbl);
    Lbl.textContent = _elem.value;
    div.style.display = "none";


    //var srch_type = document.getElementById("SearchTypeStorage");
   //if (_elem.id == SearchBooksLbl)
    //{
     //    srch_type.value = 1;
    //}
       //if (_elem.id == SearchAuthorsLbl) {
    //    srch_type.value = 2;
       //}
         //if (_elem.id == SearchGenreLbl) {
     //    srch_type.value = 3;
       //}

     var srch_type = document.getElementById("SearchTypeStorage");
    if (_elem.value == "search Books")
    {
       srch_type.value = 1;
    }
   if(_elem.value=="search Authors")
    {
       srch_type.value = 2;
    }
   if (_elem.value == "search Genre") {
      srch_type.value = 3;
    }
   }

How can I replace onclicks inside "li" tag with one onclick on "ul" tag and manage it in java Script section?

+3


source to share


2 answers


Use JQuery



$("ul.SearchTypes li").on("click",function(){ OnClickChangeSearchText(this,'SearchBoxLbl'); })
+2


source


Try using data strong> attribute for LI tags. Here's my answer: Demo

Html

<ul class="SearchTypes">
   <li id="SearchDefaultLbl" class="search-list-type" data-search-type="default">
       <div>Default Search</div>
   </li>
   <li id="SearchLocations" class="search-list-type" data-search-type="books">
       <div>search Books</div>
   </li>
   <li id="SearchDevelopments" class="search-list-type" data-search-type="authors">
       <div>search Authors</div>
   </li>
   <li id="Searchpeople" class="search-list-type" data-search-type="genre">
       <div>search Genre</div>
   </li>
</ul>


Js

$(".SearchTypes li[data-search-type]").click(function(e) {
    var searchType = $(e.currentTarget).data('search-type');
    switch (searchType) {
        case 'books':
            alert("SEARCH TYPE IS BOOKS");
            break;
        case 'authors':
            alert("SEARCH TYPE IS AUTHORS");
            break;
        case 'genre':
            alert("SEARCH TYPE IS GENRE");
            break;
        default:
            alert("SEARCH TYPE IS DEFAULT");
            break;
    }
});
0


source






More articles:


All Articles