单击按钮时切换状态？

Question

我遇到了一个正在处理的 design/UX 问题。

我有一个显示 "No Filter" 的按钮，如果我点击它，我希望它更改为 "Reset"，然后点击重置应该让我回到原来的状态。（无过滤器）（此外，如果有帮助，我正在更改下拉列表中的值）

我应该用什么来表示这种行为？（Switch，Button？）有点困惑。

代码：

      <button type="button" class="btn btn-sm" id="removeDwell">
          <i id="removeDwell"></i> No filter
      </button>

Answer 1

我建议在开始时将两个按钮内部选项都放在那里。然后使用 CSS 和 JS 来切换 class 和 hide/shows 相关的内部结构。鉴于您提到您正在更改下拉列表中的值，我假设您可能已经在某处绑定了一个按钮 .on('click')，此代码将扩展它。

通过使用 .btn-active-toggle 和内部 .when-active 或 .when-inactive classes，您可以选择在许多地方使用相同的逻辑想要切换按钮的内部显示（或者任何具有 .btn-active-toggle 的 class 的东西）。在命名约定方面，给定 bootstrap 包括 CSS 对于任何 .btn 和 class .active，您可能需要考虑使用不同的 class 名称比 .active 如果您不希望这种 out-of-the-box 样式；只需更新下面的 JS 和 CSS。

注意：从可访问性的角度来看，此解决方案并不是最佳解决方案，因为屏幕阅读器会读取两个内部内容，而不知道哪个是活动的。如果这对您很重要，请考虑类似地切换 aria values to specify which is active

HTML

<button type="button" class="btn btn-sm btn-active-toggle" id="removeDwell">
    <span class="when-active">  
        <i class="glyphicon glyphicon-remove"></i> No filter
    </span>
    <span class="when-inactive">    
        <i class="glyphicon glyphicon-refresh"></i> Reset
    </span>
</button>

CSS

.btn-active-toggle.active .when-active,
.btn-active-toggle .when-inactive{
    display:inline-block;
}
.btn-active-toggle.active .when-inactive,
.btn-active-toggle .when-active{
    display:none;
}

JS

$('#removeDwell').on('click', function(){
    $(this).toggleClass('active');
})

JSFIDDLE

Answer 2

以下是 JavaScript 解决方案，不会增加任何 HTML 开销：

    var defaultText,
        substituteText,
        btn;

    /* Default text of the button */
    defaultText = 'No Filter';
    /* Alternate text for button */
    substituteText = 'Reset';
    /* Grab our button */
    btn = document.querySelector('.btn');

    /* Add a listener to the button instance so we can manipulate it */
    btn.addEventListener('click', function() {
      changeText(this, defaultText, substituteText);
    }, false);

    /**
     * Change the text of a button
     * @param {el} object HTMLElement: button to change text of
     * @param {dText} string: default text
     * @param {nText} string: new text
     **/
    function changeText(el, dText, nText) {
      var content = '',
          context = '';
  
      /**
       * Set the text of a button
       *     - dependant upon current text
       **/
      function setText() {
        return (content === dText) ? nText : dText;
      }
  
      /* Check to see if the browser accepts textContent */
      if ('textContent' in document.body) {
        context = 'textContent';
        /* Get the current button text */
        content = el[context];
      /* Browser does NOT use textContent */
      } else {
        /* Get the button text with fallback option */
        content = el.firstChild.nodeValue;
      }
  
      /* Set button text */
      if (context === 'textContent') {
        el.textContent = setText();
      } else {
        el.firstChild.nodeValue = setText();
      }
    }

.btn {
  position: relative;
  width: 6em;
  height: 2em;
  padding: 0 0.2em 0.2em 0.2em ;
  margin: 3% 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2em;
  color: #eee; 
  background-color: #1B6CBD;
  border: 1px solid #0E3A59;
  border-radius: 0.2em;
  box-shadow: 0 1px 0 #0E3A59,
    0 0 2px rgba(#1B6CBD, 0.8);
  text-shadow: 0.05em 0.05em 0 #555;

} 

.btn,
.btn:hover {
  transition: background 150ms;
}

.btn:hover,
.btn:active { 
  color: #eee; 
  background: #114C8F;
  border-color: #0E3A59;
}

<button class="btn" type="button">No Filter</button>

单击按钮时切换状态？

Switching states when button is clicked?

html

css

user-experience

twitter-bootstrap