반응형
클릭시 이 요소를 자바스크립트로 전달하고 클릭한 요소에 클래스를 추가하는 방법
아래와 같은 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사용자가 탭을 클릭하면 (현재) 개체가 전송됩니까?
클릭한 요소를 가져오려면 다음 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');
}
좋아요를 해보세요
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
클래스 선택에 사용해야 하는 경우.학명 앞에그리고 부모님을 위한 수업을 추가해야 합니다.당신이 앵커 태그를 클릭하고 있기 때문에 그렇지 않습니다.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 요소에 대한 active class도 있습니다.한번 해보세요.
<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>
사용가능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') ;
}
<!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
반응형
'programing' 카테고리의 다른 글
| 텍스트를 변경할 때마다 UITtextView가 맨 위로 스크롤되도록 하려면 어떻게 해야 합니까? (0) | 2023.10.23 |
|---|---|
| 관계 열은 어디서 같습니까? (0) | 2023.10.23 |
| Android Retrofit 라이브러리에서 클래스의 변환기를 만들 수 없습니다. (0) | 2023.10.23 |
| uitabbar controller 숨김 방법 (0) | 2023.10.23 |
| 사이트가 주기적으로 중단되고 "Myql connect error [localhost]: (2002) Connection rejected (400)" 오류가 발생합니다. (0) | 2023.10.23 |