Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.09.2013, 14:11
Новичок на форуме
Отправить личное сообщение для AlexBJ Посмотреть профиль Найти все сообщения от AlexBJ
 
Регистрация: 30.09.2013
Сообщений: 5

как заставить 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'">


Подскажите, пожалуйста, как оптимизировать
Ответить с цитированием
  #2 (permalink)  
Старый 30.09.2013, 14:35
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

$(function() {
	var link = 'http://translate.google.ru/',
		checkbox = $('#translateCheckbox')[0];
	$('a[href]').click(function() {
		if(checkbox.checked) {
			document.location = link + this.href;
			return false;
		}
	});
});
Ответить с цитированием
  #3 (permalink)  
Старый 30.09.2013, 14:42
Новичок на форуме
Отправить личное сообщение для AlexBJ Посмотреть профиль Найти все сообщения от AlexBJ
 
Регистрация: 30.09.2013
Сообщений: 5

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 30.09.2013, 14:45
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Нет, просто:

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


Не нужно нигде писать onclick.
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2013, 14:52
Новичок на форуме
Отправить личное сообщение для AlexBJ Посмотреть профиль Найти все сообщения от AlexBJ
 
Регистрация: 30.09.2013
Сообщений: 5

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

<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, 30.09.2013 в 15:26.
Ответить с цитированием
  #6 (permalink)  
Старый 30.09.2013, 23:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

AlexBJ,
а где загрузка jquery?
Ответить с цитированием
  #7 (permalink)  
Старый 30.09.2013, 23:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

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>

Последний раз редактировалось рони, 30.09.2013 в 23:47.
Ответить с цитированием
  #8 (permalink)  
Старый 02.10.2013, 07:59
Новичок на форуме
Отправить личное сообщение для AlexBJ Посмотреть профиль Найти все сообщения от AlexBJ
 
Регистрация: 30.09.2013
Сообщений: 5

Огромное спасибо! Я подключал jquery после тегов хед. Только теперь вопрос возник - у меня на странице все ссылки теперь переводятся, в т.ч. и меню - можно ли как-то ограничить действие скрипта локально, например только в слое menu?
Ответить с цитированием
  #9 (permalink)  
Старый 02.10.2013, 08:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,187

AlexBJ,
$('a[href]') -> $('#menu a[href]') изучите селекторы jquery
Ответить с цитированием
  #10 (permalink)  
Старый 02.10.2013, 09:19
Новичок на форуме
Отправить личное сообщение для AlexBJ Посмотреть профиль Найти все сообщения от AlexBJ
 
Регистрация: 30.09.2013
Сообщений: 5

Сообщение от рони Посмотреть сообщение
AlexBJ,
$('a[href]') -> $('#menu a[href]') изучите селекторы jquery
ага, вбил как $('a[href]#menu '). Спасибо огромное!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как на выбраной фотографии при помощи jQuery добавить checkbox? Dmitriy78781 jQuery 1 16.04.2013 14:29
как сделать зависимость checkbox и select MasterHrust Javascript под браузер 12 09.01.2012 11:27
Как из строки содержащей namespace получить ссылку на объект? wwwboy Общие вопросы Javascript 2 07.12.2011 07:22
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 12:36
Как постоянно запускать одну и туже ссылку? Maxim Общие вопросы Javascript 28 27.02.2009 08:25