div 클릭 이벤트에서 Jquery를 추가하고 제거하는 방법

jquery를 처음 사용하고 div에서 div에 ID를 추가하고 제거하는 방법을 알고 싶습니다 (click 이벤트를 사용하고 html에 추가). 아래의 코드에서 div를 클릭하여 ID를 추가 할 수 있었지만 제거하는 방법을 모르겠습니다. 노란색으로 강조 표시된 div는 추가 된 div 여야합니다. 강조 표시를 제거하려면 div를 다시 클릭하여 html에서 ID를 제거해야합니다. 모든 도움을 미리 감사드립니다.div 클릭 이벤트에서 Jquery를 추가하고 제거하는 방법

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('div.click').click(function() { 
    var bg = $(this).css('backgroundColor'); 
    $(this).css({backgroundColor: bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 'transparent' : 'yellow'}); 
    }); 
}); 
$(function(){ 
    $('#div1').bind('click', click); 
    $('#div2').bind('click', click); 
    $('#div3').bind('click', click); 
}); 
function click(event){ 
    $('#p1').append(event.target.id + ","); 
} 

</script> 
</head> 
<body> 
<div class="click" id="div1">click me</div> 
<div class="click" id="div2">click me</div> 
<div class="click" id="div3">click me</div> 
<p id="p1"></p> 
</div> 
</body> 
</html>

출처

2009-07-10 Anonymous

스타일을 직접 변경하는 대신 CSS 클래스를 사용하는 것이 약간 깔끔합니다. 그렇게하면 편리한 toggleClass 기능을 이용하여 강조를 켜고 끌 수 있습니다. div가 강조 표시되면 쉽게 테스트 할 수 있습니다. div.is(".highlighted") 또는 div.hasClass("highlighted")이 나중에 알려줍니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('div.click').click(function() { 
     $(this).toggleClass('highlighted'); 
    }); 
    }); 

    $(function() { 
    // Can use one CSS selector to find all three divs and bind them all at once. 
    $('#div1, #div2, #div3').bind('click', click); 
    }); 

    function click() { 
    var p1 = $("#p1"); 

    if ($(this).is(".highlighted")) { 
     p1.append(this.id + ","); 
    } 
    else { 
     p1.text(p1.text().replace(this.id + ",", "")); 
    } 
    } 

</script> 

<style type="text/css"> 
    .highlighted { 
    background: yellow; 
    } 
</style>

출처

2009-07-10 03:33:32

John, 정말 고마워! –

나는 일 개 처리 준비 이벤트에서 별도의 블록에 다른 기능을 유지하고 싶다.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<script type="text/javascript"> 
    var divs = new Object(); 

    function click(event){ 
     var did=event.target.id; 

     if($("#"+did).css('backgroundColor') == 'yellow') 
      divs[did]=true; 
     else 
      divs[did]=false; 

     AppendText(); 
    } 
    function AppendText(){ 
     var txt=""; 
     for(var x in divs) 
      if(divs[x]==true) 
       txt +=x+","; 

     $('#p1').html(txt); 
    }  
</script>

이제 연결 연결을 클릭합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('div.click').click(function() { 
     var bg = $(this).css('backgroundColor'); 
     $(this).css({backgroundColor: 
       bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 
       'transparent' : 'yellow'}); 
     }); 
     $('#div1').bind('click', divclick); 
     $('#div2').bind('click', divclick); 
     $('#div3').bind('click', divclick); 
    }); 
</script>

출처

2009-07-10 03:24:04 TheVillageIdiot

답장을 보내 주셔서 감사합니다. 하이라이트를 제거하기 위해 div를 클릭하는 예제에서는 HTML에서 ID를 제거하지 않지만 다른 ID가 추가되는 것을 방지합니다. 제거 방법을 보여줄 수 있습니까? –

div 클릭 이벤트에서 Jquery를 추가하고 제거하는 방법

답변

관련 문제