So übergeben Sie dieses Element an die JavaScript-Funktion onclick und fügen dem angeklickten Element eine Klasse hinzu

83

Ich hatte einen HTML-Navigationscode wie unten

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>
Erweitern Sie das Snippet

Aus dem obigen Code versuche ich also, wenn der Benutzer auf eine der Registerkarten klickt, alle verbleibenden Registerkarten nicht aktiv sein sollten und das aktuelle aktuelle Element / die aktuelle aktuelle Registerkarte aktiv sein sollte, aber der obige Code funktioniert nicht Kann mir bitte jemand mitteilen, wie der obige Code funktioniert this? Gibt es auch eine Möglichkeit , das (aktuelle) Objekt zu senden, wenn der Benutzer auf die Registerkarte klickt, da ich dafür nur Javascript onclick verwenden möchte?

javascript jquery html onclick Shiva Krishna Bavandla
quelle

Antworten:

110

Verwenden Sie diesen HTML-Code, um das angeklickte Element abzurufen:

<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>

Skript:

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

Sie können verwenden addEventListener, um thisan eine JavaScript-Funktion zu übergeben.

HTML

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

JavaScript

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

 function Data(string)
          {
                $('.filter').removeClass('active');
                $(this).parent().addClass('active') ;
          }
Naman
quelle
1 
<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>
Vicky Gonsalves
quelle
1

Sie haben zwei Probleme in Ihrem Code. Zuerst benötigen Sie eine Referenz, um das Element beim Klicken zu erfassen. Versuchen Sie, Ihrer Funktion einen weiteren Parameter hinzuzufügen, um darauf zu verweisen. Die aktive Klasse ist anfangs auch für das li-Element, während Sie versuchen, es einem "a" -Element in der Funktion hinzuzufügen. Versuche dies..

<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>
user1776573
quelle
0

Versuchen Sie es wie

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

Für die Klassenauswahl müssen Sie .vor dem Klassennamen verwenden. Und Sie müssen die Klasse für das übergeordnete Element hinzufügen . Wenn Sie auf das Ankertag klicken, nicht auf das filter.

Gautam3164
quelle
0 
<!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>
Arun
quelle