jQuery로 활성 클래스를 추가하고 제거하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/1660825

문제

순서가없는 목록이 있습니다.

<style>
  #button1 { position:relative; z-index: 3; }
  #button2 { position:relative; z-index: 2; }
  #button3 { position:relative; z-index: 1; }
</style>

<ul>
  <li id="button1">Button 1</li>
  <li id="button2">Button 2</li>
  <li id="button3">Button 3</li>
</ul>

나는 현재 CSS를 사용하여 각 ID에 다른 z-index를 제공하여 한 버튼이 다음 버튼 위에 있도록합니다. 내가하고 싶은 것은 jQuery를 사용하여 '999'와 같이 클릭 한 버튼에 더 높은 z-index를 추가하는 클래스를 추가하여 다른 두 버튼 위에 있는지 확인하는 것입니다. 현재 클릭 된 클릭에 활성 클래스를 추가하는 방법을 알 수 없습니다. <li> 현재 어떤 버튼이 설정된 모든 버튼에서 활성 클래스를 제거하는 동안. jQuery가 다른 두 가지 중 어느 것을 알아내는 지 모르겠습니다. <li>새 버튼이 푸시되기 전에 활성 클래스 세트가 있습니다. 어떻게할까요?

또한 클래스를 추가하면 이미 z- 인덱스를 설정하여 <li>의 ID. 아마도 현재 푸시 된 버튼의 인라인 CSS에 영향을 미쳐 ID의 CSS를 무시하고 다른 두 가지 중 어느 것이 인라인 CSS Z-Index가 '999'로 설정되어 있는지 확인하여 제거 할 수 있습니다. 인라인 CSS는 다른 두 버튼보다 Z- 인덱스가 더 커서 상단에 나타 납니까?

도움이 되었습니까?

해결책

Kobi의 답변을 조금 더 가져옵니다. 가능하면 Li (S)에게 공통 수업이나 UL의 ID를 줄 것입니다.

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.removeClass('active');
    $(this).addClass('active');
});

ID를 기반으로 z-index를 설정하는 경우 ID의 CSS 규칙이 클래스 기반 규칙보다 우선합니다. Z-Index 속성을 인라인으로 넣고 jQuery로 변경할 수 있습니다.

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1.
    $(this).css('z-index', 999);
});

다른 팁

모범 사례는 클래스를 사용하는 것이지만 다음과 같은 스타일 속성을 수정할 수도 있습니다.

$('li').click(function(){

  var li = $(this);

  // check the highest z-index
  var maxIndex = 4;

  $('li').each(function(){
    var zindex = $(this).css("z-index");
    if ( parseInt(zindex) > maxIndex)
    {
      maxIndex = parseInt(zindex);
    }
  });

  // increment by 1
  maxIndex++;

  li.css('z-index', maxIndex);
});

내가 올바르게 이해한다면

$('li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active')
});

편집 - 당신이 겪고있는 것은 CSS 문제입니다 - #id 규칙이 우선합니다 .class 규칙.

질문에 답하기 위해 다음을 사용하여 z-index를 설정할 수 있습니다.

$(this).css('z-index', 999);

당신이 모든 대답을보고 형제 자매 선택기를 찾아서, 나는 간단하고 나를 위해 일하는 대답을 알아 냈습니다. 수업을 사용하지 않은 것 외에 다른 문제가 있는지 알려주세요. 내 상황에 대해 잘 작동한다고 생각합니다! 모든 사람들의 도움에 감사드립니다!

$('li').click(function(){
      $(this).css({'z-index' : '999'})
      .siblings().css({'z-index' : ''});
});

Smack0007의 답변은 제가 사용하는 답변을 가장 많이 얻는 데 도움이되었으므로 확인 마크를 제공하고 있습니다.

다음은 다른 방법입니다 ... z-index를 저장하고 활성화 버튼이 없을 때 대체합니다.

$(document).ready(function(){
 var indx = $('li[id*="button"]').length;
 $('#button1').addClass('active');
 $('li[id*="button"]').each(function(){
  $(this).css('z-index',indx).data('zindx', indx);
  $(this).click(function(){
   var active = $('.active');
   active.css('z-index', active.data('zindx')).removeClass('active');
   $(this).addClass('active').css('z-index',999);
  })
  indx--;
 })
})
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top