Bootstrap dropdown item clicked, change button class using toggleClass Jquery

Question

Currently I have multiple buttons on my website, these components are using bootstrap. When each button is clicked, a drop-down appears with different priorities dependent on the button the user selects. I am trying to find a way to update the button class to match the priority selected.

For example priorities against bootstrap component class:

High priority is bootstrap class: btn btn-danger btn-sm dropdown-toggle
Medium priority is bootstrap class: btn btn-warning btn-sm dropdown-toggle
Low priority is bootstrap class: btn btn-success btn-sm dropdown-toggle
Service request priority is bootstrap class: btn btn-info btn-sm dropdown-toggle

HTML code:

    
  MediumLowServiceRequest



  HighLowServiceRequest



  HighMediumServiceRequest



  HighMediumLow



  HighMediumLowServiceRequest



  MediumLowServiceRequest



  HighLowServiceRequest



  HighMediumServiceRequest



  HighMediumLow



  HighMediumLowServiceRequest

Javascript:

        //update priority
$("#tableBody").on('click', '.dropdown-item', function(e) {
      var priority = $(this).attr("datapriority");
  console.log(priority);
    //issue I am having is below
    if (priority == "HIGH") {
      console.log("first: " + priority);
      object.toggleClass('btn btn-danger btn-sm dropdown-toggle');
    } else if (priority == "MEDIUM") {
      console.log("second: " + priority);
      object.toggleClass('btn btn-warning btn-sm dropdown-toggle');
    } else if (priority == "LOW") {
      console.log("third: " + priority);
      object.toggleClass('btn btn-success btn-sm dropdown-toggle');
    } else if (priority == "SERVICEREQUEST") {
      console.log("fourth: " + priority);
      object.toggleClass('btn btn-info btn-sm dropdown-toggle');
    }

});

CSS:

    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

I also want to ensure the text on the button changes to represent what priority it is that was selected. Also I want to ensure only when one button is clicked, only that button should update not all buttons that match that class.

If the above is unclear I am happy to try explain with more details.

Example:

User clicks on first 'High' button which is currently the class bt button danger
User selects medium from the drop down
Button has now changed to the text 'Medium' and has the class 'btn btn-warning btn-sm dropdown-toggle' and should now have the drop down choices as 'High', 'Low' and 'Service Request'

Jfiddle also here: https://jsfiddle.net/Lohjzvqc/7/

Alexander Demichev · Accepted Answer

You can add some additional info to button (such as id) and to your dropdown options. For example:




Medium
Low
ServiceRequest

Then next script change button style and text by choosing option in select (it uses option text comparsion, so data-priority tag is unnecessary, but you can rewrite script to use it)

$('a[name=priority]').on('click',function() {
  const btn = $('#btn');
  const selectedPrior = $(this);
  switchPriority(btn, selectedPrior);
  switchBtnStyle(btn);
});

function switchPriority(currentPriorBtn, newPriorA){
    const btnText = currentPriorBtn.text();
  const aText = newPriorA.text();
  newPriorA.text(btnText);
  currentPriorBtn.text(aText);
}

function switchBtnStyle(btn){
    const btnText = btn.text();
  btn.removeClass();
  switch(btnText){
    case 'High':
    btn.addClass('btn btn-danger btn-sm dropdown-toggle');
    break;
    case 'Low':
    btn.addClass('btn btn-success btn-sm dropdown-toggle');
    break;
    case 'Medium':
    btn.addClass('btn btn-warning btn-sm dropdown-toggle');
    break;
    case 'ServiceRequest':
    btn.addClass('btn btn-info btn-sm dropdown-toggle');
    break;
  }
}

Fiddle here

Bootstrap dropdown item clicked, change button class using toggleClass Jquery

Answers (1)

Related Questions