jquery - 如果是 "on"不要切换

Question

我有两个按钮。单击其中一个时，会出现一个灰色框，再次单击该按钮会将框送出舞台。

我点击按钮 1，出现灰色框，其中显示“按钮 1”。

当灰色框在舞台上时，如果我单击按钮 2，我希望它保留在舞台上并显示文本“按钮 2”，但灰色框熄灭。

我怎样才能将它保留在舞台上并只更改框中的文本？

$('.clickMe').on("click", function() {
  var MyText = $(this).text();
  $('.gray-box').text(MyText).toggleClass('dock');
})

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='clickMe'>Button 1
 
 </button>
<p></p>
<button class='clickMe'>Button 2</button>

<div class="gray-box">
  My box
</div>

View on JSFiddle

Answer 1

我假设您只想隐藏与单击按钮具有相同文本的框。我建议将框中的文本与单击按钮的文本进行比较。如果它们相同，请切换该框。如果它们不相同，请设置框文本并确保显示该框。

这是一个演示:

var $grayBox = $('.gray-box');

$('.clickMe').on("click", function() {

  // get the text of the clicked button
  var MyText = $(this).text();

  // if the box text is the same as the button text ...
  if (MyText == $grayBox.text()) {

    // ... toggle the box (in or out) ...
    $grayBox.toggleClass('dock');

  } else {

    // ... otherwise, set the box text and make sure it's showing.
    $grayBox.text(MyText).addClass('dock');

  }

})

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='clickMe'>Button 1
 
 </button>
<p></p>
<button class='clickMe'>Button 2</button>

<div class="gray-box">
  My box
</div>

---

编辑

这是另一种方法，代码更简洁一些。

请注意 toggleClass()接受一个state参数。
如果 state 为 true，则添加该类；如果 state 为 false，则删除该类。

.toggleClass( className, state )

state
Type: Boolean
A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.

演示:

var $grayBox = $('.gray-box');

$('.clickMe').on('click', function() {

  // get text of clicked button and box.
  var myText = $(this).text();
  var boxText = $grayBox.text();

  // "true" if text differs OR box is hidden. otherwise "false".
  var state = myText != boxText || $grayBox.not('.dock');

  // update the box text and state.
  $grayBox.text(myText).toggleClass('dock', state);

})

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class='clickMe'>Button 1</button>
<button class='clickMe'>Button 2</button>
<div class="gray-box">My box</div>