單擊一個元素以觸發另一個的鏈接

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將不知道要單擊哪個元素，在您的情況下，該類只有一個元素，但是您仍然需要用[0]說出哪個元素。

工作jsfiddle示例：

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

我說target="_blank"的a標簽只是為了測試它無需刷新頁面每次我點擊它，但在打開新標簽頁中的鏈接，你可以根據自己的喜好將其刪除。

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類的元素時，將觸發對具有鏈接類的元素的單擊。 如果鏈接類具有多個元素，則可能需要使用元素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 個解決方案

解決方案1
0 已采納 2015-09-16 14:50:35

解決方案2
0 2015-09-16 14:51:47

解決方案3
0 2015-09-16 15:07:14

單擊一個元素以觸發另一個的鏈接

問題描述

3 個解決方案

解決方案1 0 已采納 2015-09-16 14:50:35

解決方案2 0 2015-09-16 14:51:47

解決方案3 0 2015-09-16 15:07:14

解決方案1
0 已采納 2015-09-16 14:50:35

解決方案2
0 2015-09-16 14:51:47

解決方案3
0 2015-09-16 15:07:14