Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > как заставить CHECKBOX модифицировать ссылку

Автор: LIFTman 30.9.2013, 14: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'">

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

Автор: RBW 30.9.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/

Автор: LIFTman 30.9.2013, 17:18

Цитата(RBW @ 30.9.2013, 16:15

)

Тут живой пример: 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>

и все равно нифига :/

Автор: RBW 30.9.2013, 18:16

в url.js тебе еще надо обернуть приведенный мной код в блок

Код


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

})

Автор: LIFTman 2.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

я так понимаю ссылкам нужно дать некий айди и потом в скрипте искать не просто "а", а "а" + айди.
верно?

Автор: LIFTman 2.10.2013, 14:37

UPD.
Вопрос закрыт. через селекторы все наладили, работает ок!

Всем спасибо!