जावास्क्रिप्ट ऑनक्लिक फ़ंक्शन के लिए इस तत्व को कैसे पास करें और उस क्लिक किए गए तत्व में एक वर्ग जोड़ें

Question

मेरे पास नीचे के रूप में एक html नेविगेशन कोड था

function Data(string) {
  //1. get some data from server according to month year etc.,
  //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
  $('.filter').removeClass('active');
  $(this).addClass('active');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
  <ul class="nav nav-tabs" style="padding-left:40px;">
    <li class="active filter"><a href="#month" onclick="Data('month')">This Month</a></li>
    <li class="filter"><a href="#year" onclick="Data('year')">Year</a></li>
    <li class="filter"><a href="#last60" onclick="Data('last60')">60 Days</a></li>
    <li class="filter"><a href="#last90" onclick="Data('last90')">90 Days</a></li>
  </ul>
</div>

इसलिए उपरोक्त कोड से मैं क्या करने की कोशिश कर रहा हूं, जब उपयोगकर्ता किसी भी टैब पर क्लिक करता है तो शेष सभी टैब सक्रिय होने चाहिए, और वर्तमान वर्तमान तत्व / टैब सक्रिय होना चाहिए, लेकिन उपरोक्त कोड काम नहीं कर रहा है, इसलिए क्या कोई कृपया मुझे यह बता सकता है कि उपरोक्त कोड को कैसे काम करना है, वैसे भी क्या हम thisउपयोगकर्ता को टैब पर क्लिक करने पर (वर्तमान) ऑब्जेक्ट भेज सकते हैं , क्योंकि मैं इसके लिए केवल जावास्क्रिप्ट का उपयोग करना चाहता हूं?

Answer 1

क्लिक किए गए तत्व को प्राप्त करने के लिए इस HTML का उपयोग करें:

<div class="row" style="padding-left:21px;">
    <ul class="nav nav-tabs" style="padding-left:40px;">
        <li class="active filter"><a href="#month" onclick="Data('month', this)">This Month</a></li>
        <li class="filter"><a href="#year" onclick="Data('year', this)">Year</a></li>
        <li class="filter"><a href="#last60" onclick="Data('last60', this)">60 Days</a></li>
        <li class="filter"><a href="#last90" onclick="Data('last90', this)">90 Days</a></li>
    </ul> 
</div>

स्क्रिप्ट:

 function Data(string, el)
 {
     $('.filter').removeClass('active');
     $(el).parent().addClass('active');
 } 

Answer 2

आप जावास्क्रिप्ट फ़ंक्शन addEventListenerको पास thisकरने के लिए उपयोग कर सकते हैं ।

एचटीएमएल

<button id="button">Year</button>

जावास्क्रिप्ट

(function () {
    var btn = document.getElementById('button');
    btn.addEventListener('click', function () {
        Date('#year');
    }, false);
})();

 function Data(string)
          {
                $('.filter').removeClass('active');
                $(this).parent().addClass('active') ;
          } 

Answer 3

<div class="row" style="padding-left:21px;">
    <ul class="nav nav-tabs" style="padding-left:40px;">
        <li class="active filter"><a href="#month" onclick="Data(this)">This Month</a></li>
        <li class="filter"><a href="#year" onclick="Data(this)">Year</a></li>
        <li class="filter"><a href="#last60" onclick="Data(this)">60 Days</a></li>
        <li class="filter"><a href="#last90" onclick="Data(this)">90 Days</a></li>
    </ul>

</div>

<script>
    function Data(element)
    {     
       element.removeClass('active');
       element.addClass('active') ;
    }
</script>

Answer 4

आपके कोड में दो मुद्दे हैं .. पहले आपको क्लिक पर तत्व को कैप्चर करने के लिए संदर्भ की आवश्यकता है। इसे संदर्भित करने के लिए अपने फ़ंक्शन में एक और पैरामीटर जोड़ने का प्रयास करें। इसके अलावा सक्रिय वर्ग शुरू में ली तत्व के लिए है, जबकि आप इसे फंक्शन में "ए" तत्व से जोड़ने की कोशिश कर रहे हैं। इसे इस्तेमाल करे..

<div class="row" style="padding-left:21px;">
 <ul class="nav nav-tabs" style="padding-left:40px;">
      <li class="active filter"><a href="#month" onclick="Data('month',this)">This Month</a></li>
      <li class="filter"><a href="#year" onclick="Data('year',this)">Year</a></li>
      <li class="filter"><a href="#last60"  onclick="Data('last60',this)">60 Days</a></li>
      <li class="filter"><a href="#last90"  onclick="Data('last90',this)">90 Days</a></li>
    </ul> 

</div>

<script>
  function Data(string,element)
    { 
      //1. get some data from server according to month year etc.,
      //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
      $('.filter').removeClass('active');

      $(element).parent().addClass('active') ;

    } 
</script>

Answer 5

जैसे कोशिश करो

<script>
function Data(string)
{      
  $('.filter').removeClass('active');
  $(this).parent('.filter').addClass('active') ;
} 
</script>

वर्ग चयनकर्ता के लिए आप उपयोग करने की आवश्यकता .से पहले classname .और आप के लिए वर्ग जोड़ने की जरूरत है माता पिता । आप एंकर टैग नहीं पर क्लिक कर रहे हैं filter।

Answer 6

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE

console.log(target);
console.log(target.src);
 var img = document.createElement('img');
 img.setAttribute('src', target.src);
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />

</body>
</html>