2015-09-16 3 views
0

У меня есть два элемента, и я хочу нажать один, чтобы вызвать ссылку других.нажмите один элемент, чтобы вызвать ссылку другого

Я пробовал два пути. Обе функции щелчка работают, так как кнопка 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> 

ответ

0

Ваш 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 тег просто проверить его без обновления страницы каждый раз я нажимаю его, но открыв ссылку в новой вкладке, вы можете удалить его в соответствии к вашим предпочтениям.

0

Хорошо, вы слишком импонируете.

Я не думаю, что вам нужно 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/

+0

Благодарим за помощь Yoann. –

0

Когда элемент с классом clickThis щелкают, это вызовет щелчок на элементах с классом ссылки. Если у вас есть несколько элементов с классом ссылок, вы можете использовать идентификатор элемента.

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

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

Вы все еще не решили проблему, вам нужно указать, какой элемент нажать, '$ ('. Link') [0] .click()' или использовать идентификатор. –

Смежные вопросы