Question

我遇到了正在处理的设计/用户体验问题。

我有一个显示“No Filter”的按钮，如果我点击，我希望它改为“重置”并点击重置应该让我回到旧状态。（没有过滤器）（另外，如果有帮助，我正在更改下拉列表中的值）

我应该用什么来表示这种行为？（开关，按钮？）有点困惑。

代码：

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

Answer 1

我建议在开始时将两个按钮内部选项放在那里。然后使用CSS和JS切换隐藏/显示相关内部的类。鉴于你提到你正在改变下拉列表中的值，我认为你可能已经在某个地方绑定了一个按钮.on('click')，这段代码只会扩展它。

通过使用.btn-active-toggle和内部.when-active或.when-inactive类，您可以选择在许多您想要切换的地方使用相同的逻辑按钮的内部显示（或者更确切地说是.btn-active-toggle类的任何内容）。就命名约定而言，给定的引导程序包含具有类.btn的任何.active的CSS，如果您不希望这样做，您可能需要考虑使用与.active不同的类名盒子造型;只需更新下面的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开销：

＆＃13;

    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();
      }
    }

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

单击按钮时切换状态？

2 个答案: