I'm trying to toggle the color of the text inside a button after it's been clicked, currently the background color toggles on and off when clicking on a button, but the text color of all buttons change at same time, i'd only like the selected button to change, how do i fix this ?

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass("active");
});
$(document).on('click', '.newsbutton', '.btn-2', function() {
  $('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton">
            <p href="" class="btn-2">BBC</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">The Guardian</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Financial Times</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Metro</p> 
            </button>

<button class="btn btn-secondary newsbutton">
            <p class="btn-2">Techcrunch</p> 
            </button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You cannot have p inside button. Buttons can only have phrasing content. Use spans instead.

That being said, you are explicitly telling jQuery

$('.btn-2').addClass('selected');

to add that class to all elements matching .btn-2. Instead, use this and find:

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass('active').find('.btn-2').addClass('selected');
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary newsbutton"><span class="btn-2">BBC</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">The Guardian</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Financial Times</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Metro</span></button>

<button class="btn btn-secondary newsbutton"><span class="btn-2">Techcrunch</span></button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

$(document).on('click', '.newsbutton', function() {
  $( ".btn-container .btn" ).each(function( index ) {
    $(this).removeClass('active');
  });
    $(this).toggleClass("active");
});

.selected {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-container">
<button class="btn btn-secondary newsbutton">BBC</button>

<button class="btn btn-secondary newsbutton">The Guardian
            </button>

<button class="btn btn-secondary newsbutton">Financial Times
            </button>
            </div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I hope this what you looking for and BTW note don't use p tag inside button. If you needed use span tag

CodePudding user response：

You are correctly capturing the currently clicked button, but your issue is with how you are implementing the color change. I believe relying too much on JS here rather than on CSS over complicates things.

Note on my implementation I am only using active as the class which represents both the text color and background color change within the button itself. I am relying more on CSS to handle the style changes and letting JS toggle a single class active.

This simplification is reflected in the HTML due to removing the span dependency, since we are working directly on the button. Using a simple selector for listening to the click events "button" (or a class name if you feel more comfortable) and toggling a single class within the button itself. That reduces the complexity out of JS into CSS and as a result you get a cleaner HTML implementation.

$(document).on('click', 'button', function (event) {
    $(this).toggleClass('active');
});

button {
  color: black;
}
button.active {
  background-color: green !important;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-secondary">BBC</button>
<button class="btn btn-secondary">The Guardian</button>
<button class="btn btn-secondary">Financial Times</button>
<button class="btn btn-secondary">Metro</button>
<button class="btn btn-secondary">Techcrunch</button>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>