Question

我尝试做一小段代码，执行以下操作：我有许多按钮组和一个div，然后单击按钮会将预定义的文本添加到匹配的div中。

我在此处将我的代码作为示例：https://jsfiddle.net/kdpqu98p/3/

HTML

<button id="hey-0">hey</button>
<button id="hi-0">hi</button>
<button id="hello-0">hello</button>
<div id="text-0"></div>

<button id="hey-1">hey</button>
<button id="hi-1">hi</button>
<button id="hello-1">hello</button>
<div id="text-1"></div>

<button id="hey-2">hey</button>
<button id="hi-2">hi</button>
<button id="hello-2">hello</button>
<div id="text-2"></div>

JAVASCRIPT

$(document).ready(function() {

  // Loops through all 3 groups
  for (var i = 2; i >= 0; i--) {
    // Gets the buttons and text block for this group.
    var text = '#text-' + i;
    var hey = '#hey-' + i;
    var hi = '#hi-' + i;
    var hello = '#hello-' + i;

    // Add functions to the buttons.
    $(hey).click(function(e) {
      $(text).append('hey');
    });

    $(hi).click(function(e) {
      $(text).append('hi');
    });

    $(hello).click(function(e) {
      $(text).append('hello');
    });
  }

});

它几乎按照我想要的方式工作，但它总是将文本添加到第一个div而不是与按钮对应的文本，因为...原因。 OO

所以这是我的问题：首先，为什么找到正确的按钮，但不是div（因为所有按钮都工作，但它总是将文本添加到第一个div）。那么，有更简单，更快捷的方法吗？我对javascript和jquery都很陌生，所以你不得不和3岁的孩子说话。我确定有一种方法可以摆脱循环并只使用一个函数来表示类似于＃34;对于所有（＃/ word / - / index /）按钮，让它们添加/ word /到#text- / index / div＆＃34的html;但我不知道怎么做。

非常感谢您的回答！

Answer 1

您可以使用DRY原则大规模简化代码。首先在所有button元素上放置一个公共类，并使用value属性存储要放在相关div中的值。从那里你可以在该类上使用单个事件处理程序，它找到相关的div并添加值。试试这个：

$('.btn').click(function() {
    $(this).nextAll('.text:first').append(this.value);
});

div {
  width: 300px;
  height: 40px;
  overflow-x: scroll;
  margin-bottom: 10px;
  background-color: #efefef;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" value="hey-0">hey</button>
<button class="btn" value="hi-0">hi</button>
<button class="btn" value="hello-0">hello</button>
<div class="text"></div>

<button class="btn" value="hey-1">hey</button>
<button class="btn" value="hi-1">hi</button>
<button class="btn" value="hello-1">hello</button>
<div class="text"></div>

<button class="btn" value="hey-2">hey</button>
<button class="btn" value="hi-2">hi</button>
<button class="btn" value="hello-2">hello</button>
<div class="text"></div>

使用按钮将预定义的html添加到div

1 个答案: