it-swarm.com.de

wie dieses Element an die onclick-Funktion von Javascript übergeben und diesem angeklickten Element eine Klasse hinzufügen

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>

ich versuche also aus dem obigen Code, wenn der Benutzer auf eine der Registerkarten klickt, sollten alle verbleibenden Registerkarten inaktiv sein, und das aktuelle Element/die aktuelle Registerkarte sollte aktiv sein, aber der obige Code funktioniert nicht Kann mir bitte jemand Bescheid geben, wie der obige Code funktioniert, gibt es auch, dass wir das this (aktuelle) Objekt senden können, wenn der Benutzer auf die Registerkarte klickt, weil ich dazu nur Javascript verwenden möchte?

Verwenden Sie dieses HTML, 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') ;
            } 
72
Sujata Chanda

Sie können addEventListener verwenden, um this an 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') ;
          } 
3
Naman

Versuchen Sie es wie

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

Für den Klassenselektor müssen Sie . vor classname verwenden. Außerdem müssen Sie die Klasse für parent hinzufügen. Wenn Sie auf das Ankertag klicken, nicht auf die Variable filter.

1
Gautam3164
<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>
1
Vicky Gonsalves

Sie haben einen Punkt verpasst:

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

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

<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>
0
user1776573
<!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> 
0
Arun