javascript - Bootstrap 组件中的错误下拉项目 Javascript 单击时更改类

Question

我有一个 Bootstrap 按钮组件，当单击此按钮时，它的默认按钮设置为“NoPriority”，您可以选择不同的优先级，例如“高”、“中”、“低”和“服务请求” .当您选择一个选项时，例如'High' 它将文本和类更改为关联的

例如高按钮是类 btn btn-danger btn-sm dropdown-toggle

然后当您单击“高”按钮时 - 您会在下拉列表中看到另一组项目，我想确保“NoPriority”不在此列表中，因为一旦选择了优先级，它就无法改回'无优先权'。

有人可以告诉我哪里出错了吗？

HTML:

<div class="btn-group">
<button id='btn' type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <ul class="dropdown-menu">
  <li><a name="priority" data-priority="high" class="dropdown-item">High</a></li>
    <li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
  <li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
  <li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>
  </ul>
</div>

CSS:

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

Javascript:

    $('a[name=priority]').on('click',function() {
    const btn = $(this).parent().parent().parent().find('button');
  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;
  }
}

jfiddle 如果有帮助:https://jsfiddle.net/9ghx291f/9/

Answer 1

如果你想从列表中删除它，那么在更改之后这样做:

$('a[name=priority]').on('click',function() {
  const btn = $(this).parent().parent().parent().find('button');
  const selectedPrior = $(this);

  switchPriority(btn, selectedPrior);
  switchBtnStyle(btn);

  // remove it after switching.
  if (selectedPrior.text() === 'NoPriority') {
    selectedPrior.remove();
  }
});

或者作为一个插件。

(function( $ ) {

  $.fn.PriorityBtn = function() {
    var events = function() {
      $('a[name=priority]').on('click', switchBtn);
    };

    var switchBtn = function () {
      let btn = $(this).parent().parent().parent().find('button');
      let selectedPrior = $(this);

      switchPriority(btn, selectedPrior);
      switchBtnStyle(btn);

      if (selectedPrior.text() === 'NoPriority') {
        selectedPrior.remove();
      }
    };

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

    var switchBtnStyle = function (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;
      }
    };
    
    events();

    return this;
  };

}( jQuery ));

// attach to all buttons
$('.priority-btn').PriorityBtn()

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="btn-group">
<button id='btn' type="button" class="btn btn-default btn-sm dropdown-toggle priority-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <ul class="dropdown-menu">
  <li><a name="priority" data-priority="high" class="dropdown-item">High</a></li>
    <li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
  <li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
  <li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>
  </ul>
</div>

<div class="btn-group">
<button id='btn' type="button" class="btn btn-default btn-sm dropdown-toggle priority-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <ul class="dropdown-menu">
  <li><a name="priority" data-priority="high" class="dropdown-item">High</a></li>
    <li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
  <li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
  <li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>
  </ul>
</div>

<div class="btn-group">
<button id='btn' type="button" class="btn btn-default btn-sm dropdown-toggle priority-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <ul class="dropdown-menu">
  <li><a name="priority" data-priority="high" class="dropdown-item">High</a></li>
    <li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
  <li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
  <li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>
  </ul>
</div>

<div class="btn-group">
<button id='btn' type="button" class="btn btn-default btn-sm dropdown-toggle priority-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <ul class="dropdown-menu">
  <li><a name="priority" data-priority="high" class="dropdown-item">High</a></li>
    <li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
  <li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
  <li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>
  </ul>
</div>