CODEWITHSUNDEEP
jquerybutton
Y. Zhang
Y. Zhang

Reputation: 193

Disable Class onclick until another button is clicked

I have one div with 4 spans in it:

<div id="text">
<span class="text_1" id="text1">text1 1</span>
<span class="text_2" id="text2">text2 2</span>
<span class="text_3" id="text3">text3 3</span>
<span class="text_4" id="text4">text4 4</span>
</div>

I have two buttons, buton1 that allows the class underline 

.underline
 { border-bottom:1px solid #000; }

to be added to each span when i click each span (so if I click text1, then the other texts shouldn't have an underline), and another button2 that should take off the underline until button1 is clicked again.

What I have is:

$('#button1').click(function () {

    $(".text_1").click(function () {
     $(".text_2").removeClass("underline");
     $(".text_3").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_1').addClass("underline");
});

     $(".text_2").click(function () {

     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_2').addClass("underline");
});
$(".text_3").click(function () {

     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_4").removeClass("underline");
     $('.text_3').addClass("underline");
});

     $(".text_4").click(function () {

     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $('.text_4').addClass("underline");
}); 
});

meaning all of the above would happen iff button1 is clicked.

so button2, I want it to remove all underline from everything, but I don't want to have to do all of the above over again because eventually I'm going to have like 100 span tags!

What I thought was correct would be something like

$('#button2').click(function () {

        $('#text').removeClass("underline") });   });

but that doesn't work. (#text being the div id)

I then tried

$('#button2').click(function () {
     $(".text_2").removeClass("underline");
     $(".text_1").removeClass("underline");
     $(".text_3").removeClass("underline");
     $('.text_4').removeClass("underline");

I want it so that after you click button2, I cannot make the span text underline until I click button1. So the one directly above removes the underline class, but I can still click each span element and make it underline which I don't want!

Could someone help me with this? I'm sort of new at this, so It'd be great if you could help me clean up button1's functions too!! Thank you!

Upvotes: 1

Views: 4033

Answers (5)

Wolf
Wolf

Reputation: 2150

You were almost there. Try the DEMO HERE

var allowClick = true;

$('#text span').click(function () {
  if (allowClick == true) {
    $('#text span').removeClass("underline");
    $(this).addClass("underline");
  }
});

$('#button1').click(function () {
  allowClick = true;
});

$('#button2').click(function () {
  $('#text span').removeClass("underline");
  allowClick = false;
});

Update:

There is another solution also in which you can unbind the click event on span. But using a variable will be simple and faster. Consider unbinding if you can not create a global variable.

Upvotes: 0

antejan
antejan

Reputation: 2624

I'm not sure that I understand you totally correct.

Demo: http://jsfiddle.net/kYg8k/

Firstly, lets handle all span clicks in one line. This adding class to clicked span and removing from its siblings.

$("#text SPAN").click(function(){
  $(this).addClass("underline").siblings().removeClass("underline");
});

Next button2 to remove underline class from any underlined span

$(".bt2").click(function(){
    $("#text SPAN").removeClass("underline");
});

Finally button1 that enables underlining by adding some flag class to #text

$(".bt1").click(function(){
  $("#text").toggleClass("underlinable");
});

and lets use this flag on event

$("#text SPAN").click(function(){
  if ($(this).closest("#text").hasClass("underlinable")) {
    $(this).addClass("underline").siblings().removeClass("underline");
  }
});

(In demo I have little advanced code with flag indication.)

Upvotes: 0

Malk
Malk

Reputation: 12003

Javascript:

$("#button1").click(function(){ 
  $("#text").removeClass("disable-underline");
});
$("#button2").click(function(){ 
  $("#text").addClass("disable-underline");
});

$("#text span").on("click", function(){
  $("#text span").removeClass("underline");
  $(this).addClass("underline");
});

CSS: 

.underline { border-bottom:1px solid #000; }
.disable-underline .underline { border-bottom: 0;}

Upvotes: 0

ATOzTOA
ATOzTOA

Reputation: 36000

Try this:

$('#button2').click(function () {
    $('.underline').removeClass('underline');
    $('#text span').unbind('click');
});

After this, just turn on the underline for what you need.

Also, you can make the button1 click like this:

$('#button1').click(function () {
    $("#text span").click(function () {
        $('.underline').removeClass('underline');
        $(this).addClass('underline');
    });
});

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47687

How about this - DEMO

$("span").on("click", function() {
  $(this).siblings().removeClass('underline').end().addClass("underline");
});

Upvotes: 1

Related Questions