演示

Question

我想通过单击另一个按钮来更改元素的文本。因此，如果我单击带有文本的按钮，则所需的元素将获得相同的文本。

这是《光晕5守护者》电脑版的风扇游戏菜单。这将是玩家发挥优势的工具。

<div class="left_menu" id=left_menu>
  <button id="option1" class="left_menu-option">option 1</button>
  <button id="option2" class="left_menu-option">option 2</button>
  <button id="option3" class="left_menu-option">option 3</button>
</div>

<div>
<button class="left_menu-open" id="left_menu_open">
  <span class="button-text">text goes here</span>
</button>
</div>

我尝试使用下拉菜单和选择菜单，但主要要求是需要更改文本的按钮可以与选项位于单独的div中。

Answer 1

您应该使用.text()功能，这使您可以在按钮内设置span的文本。它还可以让您从单击的按钮中获取文本。

您命名约定有点奇怪，所以我将.left_menu-option更改为.left_menu_option，以使其与您用于按钮（#left_menu_open）的约定一致。

演示

// Add click event to all buttons with the class .left_menu-option
$(".left_menu_option").click( function() {

  // Set the text of the button
  $("#left_menu_open .button-text").text($(this).text());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu" id=left_menu>
  <button id="option1" class="left_menu_option">option 1</button>
  <button id="option2" class="left_menu_option">option 2</button>
  <button id="option3" class="left_menu_option">option 3</button>
</div>

<div>
<button class="left_menu-open" id="left_menu_open">
  <span class="button-text">text goes here</span>
</button>
</div>

Answer 2

您将使用event listeners。 jQuery使其变得容易（因为您已标记jQuery）。

$(document).on('click', '#left_menu button', function(){
  $("#left_menu_open .button-text").text(this.innerHTML);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu" id=left_menu>
  <button id="option1" class="left_menu-option">option 1</button>
  <button id="option2" class="left_menu-option">option 2</button>
  <button id="option3" class="left_menu-option">option 3</button>
</div>

<div>
<button class="left_menu-open" id="left_menu_open">
  <span class="button-text">text goes here</span>
</button>
</div>

从选项更改元素的文本

2 个答案:

演示