как заставить CHECKBOX модифицировать ссылку

 
0
 
JavaScript
ava
LIFTman | 30.09.2013, 15:20
Друзья, привет!

На сайте (wordpress) есть каталог ссылок, а вверху страницы чекбокс, активируя который, все ссылки должны при клике иметь дополнение в виде "http://translate.google.ru/"+собственно_ссылка



<form name="red">
2        <input type="checkbox" id="translateCheckbox" name="translateCheckbox" checked="checked" />
3        </form>
4        <div id="menu">Каталог одежды
5        <a href="http://www.ebay.com/itm/ws/eBayISAPI.dll?ViewItem&item=390669025343" onclick="function();">Куртка</a>
6          </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'">



Подскажите, пожалуйста, как оптимизировать 
Comments (5)
ava
RBW | 30.09.2013, 16:15 #
1. Подключаешь  jQuery
2. Создаешь чекбокс, например

<input type="checkbox" id="translate">

3. Вешаешь в js файл событие на клик

$('#translate').on('click', function() {
    // то что мы добавляем к ссылке
    var prefix = 'http://ya.ru' 

    // Ситуация, когда поставили галочку в чекбоксе
    if ($(this).is(':checked') == true) {

        // Собираем все ссылки со страницы
        $.each($.find('a'), function() {
            // Это вариант если пути абсолютные т.е вида http://site.ru/query
            var url =  $(this).attr('href').replace('http://', '') 

            // Это вариант если пути начинаются со слэша т.е вида /query
            var url =  $(this).attr('href') 

            // Присваиваем ссылкам значение
            $(this).attr('href', prefix + url)
        })
    }
    // Ситуация, когда галочку сняли
    else {
        // Собираем все ссылки со страницы
        $.each($.find('a'), function() {
            // Это вариант если пути начинаются со слэша т.е вида /query
            var url =  $(this).attr('href').replace(prefix, '') 
            
            // Присваиваем ссылкам значение
            $(this).attr('href', url)
        })
    }
})


Тут живой пример: http://jsfiddle.net/w2ejm/
ava
LIFTman | 30.09.2013, 17:18 #
Цитата (RBW @  30.9.2013,  16:15 findReferencedText)
Тут живой пример: http://jsfiddle.net/w2ejm/ 

живой пример работает, а вот реальный что-то не очень.
вроде подключил jQuery к вордпрессу,
в теле страницы пишу

<script type="text/javascript" src="url.js"></script>  

<input type="checkbox" id="translate">
    <a href="/test/url1">Test 1</a>
    <a href="/test/url2">Test 2</a>

и все равно нифига :/
ava
RBW | 30.09.2013, 18:16 #
в url.js тебе еще надо  обернуть приведенный мной код в блок


$.document.on('ready',  function() {

})
ava
LIFTman | 02.10.2013, 08:03 #
Цитата (RBW @ 30.9.2013,  16:15)



    // Собираем все ссылки со страницы
    $.each($.find('a'), function() {
    // Это вариант если пути абсолютные т.е вида http://site.ru/query
    var url =  $(this).attr('href').replace('http://', '') 


    // Это вариант если пути начинаются со слэша т.е вида /query
    var url =  $(this).attr('href') 


    // Присваиваем ссылкам значение 
    $(this).attr('href', prefix + url)
    })
  }
  // Ситуация, когда галочку сняли
  else {
    // Собираем все ссылки со страницы
    $.each($.find('a'), function() {
    // Это вариант если пути начинаются со слэша т.е вида /query
    var url =  $(this).attr('href').replace(prefix, '') 
    


А можно ли теперь как-то обрабатывать ссылки только определенного слоя страницы? а то меню сайта скриптом так же обрабатывается и сайт переводит сам себя smile я так понимаю ссылкам нужно дать некий айди и потом в скрипте искать не просто "а", а "а" + айди.
верно?
ava
LIFTman | 02.10.2013, 14:37 #
UPD.
Вопрос закрыт. через селекторы все наладили, работает ок!

Всем спасибо!
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  LIFTman   RBW
advanced
Submit