单击一个元素触发另一个元素 link

Question

我有两个元素，我想点击一个来触发其他元素link。

我试过两种方法。两种点击功能都起作用，因为按钮 1 在点击时变为红色，但它不会触发 link。我从下面遗漏了什么？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<a class="link" href="http://google.com">Button 1</a>
<div class="clickThis">i want to click this one</div>


<script>

var clickThis = document.getElementsByClassName('clickThis');
var link = document.getElementsByClassName('link');


$(clickThis).click(function(){
    $(link).css({"color": "red"});
    $(link).trigger('click');
});

$(document).on('click', clickThis, function(event) { 
event.preventDefault(); 
    $(link).css({"color": "red"});
    $(link).click();
});

</script>

</body>
</html>

Answer 1

你的 JS 应该是这样的：

var clickThis = '.clickThis';
var link = '.link';

$(clickThis).click(function(){
    $(link).css({"color": "red"});
    $(link)[0].click();
});

记住当你 select classes 他们 return 不止一个元素时，所以 jQuery 不知道点击哪个元素，在你的情况下你只有一个元素 class 但你仍然需要说出哪个元素 [0].

工作 jsfiddle 示例：

http://jsfiddle.net/qf0ta0cx/1/

我在 a 标签中添加了 target="_blank" 只是为了测试它，而不是每次单击它时都刷新页面但是在新选项卡中打开 link ，您可以根据根据您的喜好。

Answer 2

好吧，你把它复杂化了。

我认为您不需要 jQuery 来实现此目标。

这是我在阅读您的代码后得出的结论：

当使用 getElementsByClassName 定位元素时，您将获得一个数组，因此请获取第一个索引以获得您需要的内容：

 var clickThis = document.getElementsByClassName('clickThis')[0];
 var link = document.getElementsByClassName('link')[0];

您可以使用 onclick 监听点击元素并使用 .click() 触发点击，很简单：

clickThis.onclick = function() {
    link.click();
};
link.onclick = function () {
    link.style.color = 'red';
}

而且......这就是让它工作所需的一切。

有时，香草 javascript 更好 :D

看看这个 jsFiddle：https://jsfiddle.net/27of62dc/1/

Answer 3

单击具有 clickThis class 的元素时，将触发对具有 link class 的元素的单击。如果您有多个带有 link class 的元素，您可能需要使用元素 ID。

$('.clickThis').on('click',function() {
    console.log('div');
    $('.link').css({"color": "red"});
    $('.link').click();
});

$('.link').click(function() {
    console.log('clicked!');
    window.location = $(this).prop('href');
});

单击一个元素触发另一个元素 link

click one element to trigger another's link

html

javascript

jquery

triggers

click