Question

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

我尝试了两种方法。两个点击功能都起作用，因为按钮1在点击时变为红色，但是它没有触发链接。我从下面找到了什么想法？

<!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();
});

请记住，当您选择类时，它们返回多个元素，因此jQuery将不知道要单击哪个元素，在您的情况下，您只有一个元素与该类，但您仍需要说明哪个元素，{{1 }}

工作jsfiddle样本：

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

我在[0]标记中添加了target="_blank"只是为了测试它，而不是每次点击它都刷新页面，而是在新标签中打开链接，您可以根据自己的喜好将其删除。

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：How to detect if python script is being run as a background process

Answer 3

当点击具有clickThis类的元素时，它将触发对具有链接类的元素的单击。如果链接类有多个元素，则可能需要使用元素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');
});

单击一个元素以触发另一个链接

3 个答案: