이 요소를 자바 스크립트 onclick 함수에 전달하고 클릭 한 요소에 클래스를 추가하는 방법

이 요소를 자바 스크립트 onclick 함수에 전달하고 클릭 한 요소에 클래스를 추가하는 방법

---

다음과 같은 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사용자가 탭을 클릭 할 때 (현재) 객체를 보낼 수 있습니다 . 왜냐하면 나는 이것을 위해 자바 스크립트 onclick 만 사용하고 싶기 때문입니까?

---

이 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');
 } 

---

JavaScript 함수 addEventListener에 전달 this하는 데 사용할 수 있습니다 .

HTML

<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') ;
          } 

---

같은 시도

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

클래스 선택기의 .경우 클래스 이름 앞에 사용해야 하며 부모에 대한 클래스를 추가해야합니다 . Bec가 아닌 앵커 태그를 클릭하고 filter있습니다.

---

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

---

코드에 두 가지 문제가 있습니다. 먼저 클릭시 요소를 캡처하기위한 참조가 필요합니다. 이것을 참조하기 위해 함수에 다른 매개 변수를 추가해보십시오. 또한 활성 클래스는 처음에는 함수의 "a"요소에 추가하려는 동안 li 요소에 대한 것입니다. 이 시도..

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

---

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

참고 URL : https://stackoverflow.com/questions/19998711/how-to-pass-this-element-to-javascript-onclick-function-and-add-a-class-to-that