Jquery एक div क्लिक ईवेंट को जोड़ने और निकालने के लिए कैसे करें

मैं jquery का उपयोग करने के लिए नया हूं और जानना चाहता हूं कि क्लिक ईवेंट का उपयोग करके div से आईडी को कैसे जोड़ना और निकालना और HTML में शामिल करना। नीचे दिए गए कोड में मैं आईडी को एक div पर क्लिक करने से जोड़ सकता हूं, लेकिन मुझे यकीन नहीं है कि कैसे निकालें। जो भी div div को पीला हाइलाइट किया जाता है वह जोड़ा जाना चाहिए। हाइलाइट को हटाने के लिए div पर फिर से क्लिक करने से HTML से आईडी को भी हटा दिया जाना चाहिए। किसी भी सहायता के लिए अग्रिम रूप से धन्यवाद।Jquery एक div क्लिक ईवेंट को जोड़ने और निकालने के लिए कैसे करें

<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

जॉन, बहुत बहुत धन्यवाद! –

मैं एक हैंडलिंग तैयार घटना से अलग ब्लॉक में अन्य कार्यों रखने के लिए पसंद करते हैं।

<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 पर क्लिक करने से एचटीएमएल से आईडी नहीं निकलती है, लेकिन यह किसी अन्य आईडी को जोड़ने से रोकती है। क्या आप दिखा सकते हैं कि कैसे निकालें? –

Jquery एक div क्लिक ईवेंट को जोड़ने और निकालने के लिए कैसे करें

उत्तर

संबंधित मुद्दे