在 javaScript 中使用 onclick() 调用 2 个不同的 div答案

【问题标题】：Calling 2 different divs using onclick() in javaScript在 javaScript 中使用 onclick() 调用 2 个不同的 div
【发布时间】：2015-12-19 03:37:51
【问题描述】：

我想知道如何在 JavaScript 中使用单个 Onclick() 函数调用两个不同的 div。

我有两个 div 和一个按钮（现在我每个 div 有 2 个按钮）。每当按下这些按钮时，需要执行 2 个 div。我只是不知道如何一次调用两个 div。

这里是示例代码。

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll');" />
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll2');" />

如何使用单个 Onclick 事件来控制这两个 div？我正在使用两个 Onclick 事件，但我只需要调用两个 div 的单个 onclick。

谢谢

【问题讨论】：

你的意思是当你点击某个东西时你想同时触发zxcTextScroller.Scroll('scroll');和zxcTextScroller.Scroll('scroll2');？为什么不把这两句话放在一个onclick函数中呢？
您可以为 scroll 和 scroll2 触发 Scroll，但让我们以某种方式通用。请发布 .Scroll 功能，以便我们为您提供帮助。基本上，您可以为每个 div 放置一个类，例如 <div id="scroll" class="js-clickable-scroll" style="position:relative; width:100px; height:40px;"></div> 和 <div id="scroll2" class="js-clickable-scroll" style="position:relative; width:100px; height:40px;"></div>，然后触发具有 js-clickable-scroll 类的元素的滚动。
我试过你的建议，效果很好。谢谢
然后，您可以使用此类 js-clickable-scroll 创建另一个 div，当您触发该类的所有元素时，它也适用于第三个。

标签： javascript html onclick

【解决方案1】：

制作一个同时处理两个 div 的函数并让每个按钮都引用该函数？比如：

var handler = function( event ) {
    zxcTextScroller.Scroll(event.target.name);
};

<input type="button" name="scroll" value="Scroll" onclick="handler" />
<input type="button" name="scroll2" value="Scroll" onclick="handler" />

或者，如果您希望函数始终滚动两个 div：

var handler = function() {
    zxcTextScroller.Scroll('scroll');
    zxcTextScroller.Scroll('scroll2');
};

【讨论】：

【解决方案2】：

只需在 onclick 属性中调用该函数两次，一次用于“scroll”，一次用于“scroll2”：

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll'); zxcTextScroller.Scroll('scroll2');">

但你不应该使用 onclick 属性，而是使用 addEventListener ，如下所示：

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" id="scrollerBtn" value="Scroll" />
<script>
    window.addEventListener('load', function (e) {
        var scrollerBtn = document.getElementById('scrollerBtn');
        scrollerBtn.addEventListener('click', function (e) {
             zxcTextScroller.Scroll('scroll');
             zxcTextScroller.Scroll('scroll2');
        });
    });
</script>

【讨论】：

像冠军一样工作！！谢谢