Javascript 单击一个元素以触发另一个'；s链接_Javascript_Jquery_Html_Triggers_Click

Javascript 单击一个元素以触发另一个'；s链接

javascript jquery html triggers

Javascript 单击一个元素以触发另一个'；s链接,javascript,jquery,html,triggers,click,Javascript,Jquery,Html,Triggers,Click,我有两个元素，我想点击其中一个来触发其他链接我试过两种方法。这两种单击功能的工作原理是，按钮1在单击时变为红色，但不会触发链接。你知道我在下面遗漏了什么吗 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> &l

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

我试过两种方法。这两种单击功能的工作原理是，按钮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>


我想点击这个
var clickThis=document.getElementsByClassName（'clickThis'）；
var link=document.getElementsByClassName（'link'）；
$（单击此项）。单击（函数（）{
$（link.css（{“color”：“red”}）；
$（link）.trigger（'click'）；
});
$（文档）。在（'click'，单击此，函数（事件）{
event.preventDefault（）；
$（link.css（{“color”：“red”}）；
$（链接）。单击（）；
});

您的JS应该如下所示：

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

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

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

[0]

说出哪个元素

工作JSIDLE示例：

我在

标记中添加了

target=“\u blank”

，只是为了测试它，而不是每次单击它都刷新页面，但在新选项卡中打开链接时，您可以根据您的偏好将其删除。

好的，您将其过度复杂化

我认为您不需要jQuery来实现这一点

在阅读了您的代码后，我可以得出以下结论：

当使用

GetElementsByCassName

将元素作为目标时，您将获得一个数组，因此获取第一个索引以获得所需的内容：

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

您可以使用

onclick

收听对元素的单击，并使用

触发单击。单击（）

，简单：

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

而且。。。这就是你所需要的一切

有时，香草javascript更好：D

看看这个JSFIDLE:

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

感谢您的帮助Yoann。您仍然没有解决此问题，您需要指示要单击的元素，

$（'.link'）[0]。单击（）

或使用ID。