Форум

AlexBJ · #1 (**permalink**) 30.09.2013, 15:11

Друзья, привет!

На сайте (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'">

Подскажите, пожалуйста, как оптимизировать

ruslan_mart · #2 (**permalink**) 30.09.2013, 15:35

$(function() {
	var link = 'http://translate.google.ru/',
		checkbox = $('#translateCheckbox')[0];
	$('a[href]').click(function() {
		if(checkbox.checked) {
			document.location = link + this.href;
			return false;
		}
	});
});

AlexBJ · #3 (**permalink**) 30.09.2013, 15:42

Сообщение от Ruslan_xDD

$(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>

ruslan_mart · #4 (**permalink**) 30.09.2013, 15:45

Нет, просто:

<a href="www.ebay.com">aaa</a>

Не нужно нигде писать onclick.

AlexBJ · #5 (**permalink**) 30.09.2013, 15:52

Что-то ничего не работает, что локально, что на сервере

<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>

рони · #6 (**permalink**) 01.10.2013, 00:29

AlexBJ,
а где загрузка jquery?

рони · #7 (**permalink**) 01.10.2013, 00:39

AlexBJ,

<!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>

AlexBJ · #8 (**permalink**) 02.10.2013, 08:59

Огромное спасибо! Я подключал jquery после тегов хед. Только теперь вопрос возник - у меня на странице все ссылки теперь переводятся, в т.ч. и меню - можно ли как-то ограничить действие скрипта локально, например только в слое menu？

рони · #9 (**permalink**) 02.10.2013, 09:10

AlexBJ,
$('a[href]') -> $('#menu a[href]') изучите селекторы jquery

AlexBJ · #10 (**permalink**) 02.10.2013, 10:19

Сообщение от рони

AlexBJ,
$('a[href]') -> $('#menu a[href]') изучите селекторы jquery

ага, вбил как $('a[href]#menu '). Спасибо огромное!

Форум

Справочник

Discord чат

Курсы javascript