как заставить CHECKBOX модифицировать ссылку
Друзья, привет!
На сайте (wordpress) есть каталог ссылок, а вверху страницы чекбокс, активируя который, все ссылки должны при клике иметь дополнение в виде "http://translate.google.ru/".
<form name="red">
<input type="checkbox" id="translateCheckbox" name="translateCheckbox" checked="checked" />
</form>
<div id="menu">Каталог одежды
<a href="http://www.ebay.com/itm/ws/eBayISAPI.dll?ViewItem&item=390669025343" onclick="function();">Куртка</a>
</div>
Т.е. чекбокс активирован по умолчанию, при клике по ссылке некая функция должна препаривать текущую ссылку и добавлять при необходимости кусок с адресом гуглтранслейта, открывая ссылку в новом окне. В процессе помогли таким кодом, но я не могу приделать его к ссылке
(function($) {
var translateCheckbox = document.getElementById('translateCheckbox'),
googleTranslateLink = 'your link here';
$(document).on('click', 'a' function(){ //can be changed to more specific element
if(translateCheckbox.checked) {
window.location = googleTranslateLink + this.href;
//return false; //may be useful in some cases
}
});
})(jQuery);
нашел также такую версию, но для каждой ссылки прописывать столько кода - нереально утяжелит страницу. <a href="javascript://" onclick="if(document.forms['form_name'].elements['checkbox_name'].checked)window.location.href='pageA.html';else window.location.href='pageB.html'"> Подскажите, пожалуйста, как оптимизировать :help: |
$(function() {
var link = 'http://translate.google.ru/',
checkbox = $('#translateCheckbox')[0];
$('a[href]').click(function() {
if(checkbox.checked) {
document.location = link + this.href;
return false;
}
});
});
|
Цитата:
<a href="www.ebay.com" onclick="function(this);">aaa</a> |
Нет, просто:
<a href="www.ebay.com">aaa</a> Не нужно нигде писать onclick. |
Что-то ничего не работает, что локально, что на сервере
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<script type="text/javascript">
$(function() {
var link = 'test',
checkbox = $('#translateCheckbox')[0];
$('a[href]').click(function() {
if(checkbox.checked) document.location = link + location.href;
});
});
</script>
<body>
<form name="red">
<input type="checkbox" id="translateCheckbox" name="translateCheckbox" checked="checked" />
</form>
<div id="menu">Каталог одежды
<a href="http://www.ebay.com">aaa</a>
</div>
</body>
</html>
|
AlexBJ,
а где загрузка jquery? |
AlexBJ,
:write:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var link = 'http://translate.google.ru/translate?sl=en&tl=ru&js=n&prev=_t&hl=ru&ie=UTF-8&u=';
$('a[href]').click(function() {
var checked = $('#translateCheckbox').is(':checked');
if(checked) {
document.location = link + this.href;
return false
}
});
});
</script>
</head>
<body>
<form name="red" id="red">
<input type="checkbox" id="translateCheckbox" name="translateCheckbox" checked="checked">
</form>
<div id="menu">
Каталог одежды <a href="http://www.ebay.com" >aaa</a>
</div>
</body>
</html>
|
Огромное спасибо! Я подключал jquery после тегов хед. Только теперь вопрос возник - у меня на странице все ссылки теперь переводятся, в т.ч. и меню - можно ли как-то ограничить действие скрипта локально, например только в слое menu？
|
AlexBJ,
$('a[href]') -> $('#menu a[href]') изучите селекторы jquery |
Цитата:
|
| Часовой пояс GMT +3, время: 10:21. |