Как изменить заголовок ввода текста в зависимости от радио с помощью jquery?

Как вы можете видеть на http://jsbin.com/erivi/, я использую Jquery для изменения некоторых изображение (и атрибут изображения) в зависимости от выбранного переключателя, я также удаляю текст формы при нажатии внутри него.

И теперь я пытаюсь изменить текст формы в зависимости от установленного переключателя.

Например, при нажатии на Вариант 3 мы должны увидеть текст ввода 3.

Вы можете увидеть и отредактировать мой код здесь: http://jsbin.com/erivi/edit

Часть, которую мне нужно улучшить, это:

  imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/'; 
$("input[type='radio']").click(function() { 
   var strarr = this.title.split('|'); 
   if(strarr.length < 2) return; 
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', starr[2]); 
});

И особенно .attr('title', starr[2]);, который должен изменить название в зависимости от 3-й части названия моего радио (пример: title='m602-1.png|Logo 3|Text of input 3')

Спасибо :)

Изменить: я забыл упомянуть, что использую несколько форм в своем реальном коде, поэтому я ищу способ сделать это без конкретного имени ввода текста, чтобы избежать повторения сценария для другого ввода текста.


jquery radio-button textinput title
person Mark    schedule 17.05.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

EDIT: идентификатор текстового поля ввода должен быть уникальным. Кроме того, вам нужно установить .attr('title',strarr[2]), .val(strarr[2]) и класс подсказки внутри события щелчка переключателя. Также необходимо внести некоторые изменения в ваш плагин inputdynvalue.

Полный обновленный рабочий код см. на странице http://jsbin.com/akawo.

Обновленный код подключаемого модуля

(function($) { 
    $.fn.inputdynvalue = function (options) { 
        var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); 
        return this.each(function(){ 
            var hvalue = opts.htext; 
            switch (opts.htext) { 
                case 'title' : hvalue = $(this).attr('title'); break; 
                case 'value' : hvalue = $(this).attr('value'); break; 
            } 
            $(this).attr('value', hvalue).addClass(opts.hclass) 
            .unbind('focus blur') 
            .bind('focus', function() {                       
                if (this.value === this.title) { 
                    this.value = ''; 
                    $(this).removeClass(opts.hclass); 
                } 
            }) 
            .bind('blur', function() { 
                if (this.value === '') { 
                    this.value = this.title; 
                    $(this).addClass(opts.hclass); 
                } 
            }); 
        }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
        htext: 'title', 
        hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function(){ 
    $("input[type='text']").inputdynvalue(); 
});

Обновленный обработчик события Click Radio Button

$("input[type='radio']").click(function() { 
   var strarr = this.title.split('|'); 
   if(strarr.length < 2) return; 
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]); 
   $('#'+this.name+'_text')
      .attr('title',strarr[2])
      .val(strarr[2])
      .addClass('hint'); 
});
person Jose Basilio    schedule 18.05.2009
comment
Привет! Спасибо за ваш ответ, но с вашим кодом все та же проблема: он меняет текст при нажатии на переключатель, но когда вы нажимаете внутри формы, он удаляет текст только при выборе первого переключателя. Когда выбран вариант 2, если щелкнуть внутри формы, текст не удаляется. Это как-то связано с моим скриптом inputdynvalue поверх исходного кода. - person Mark; 18.05.2009
comment
Большое спасибо, это именно то, что я искал! :-) - person Mark; 18.05.2009

arrow_upward
1
arrow_downward

Попробуй это:

<form method="post" action="">
    <div>
        <img id="iymok" src="http://download.kde.org/khotnewstuff/icons/previews/m732-1.png" alt="Alt by default" />
        <input type="text" id="iymok_text" title="Blablabla Text 1" />
        <label><input type="radio" checked="checked" name="iymok" title="m133-1.png|Logo 1|Blablabla Text 1" />Choice 1</label>
        <label><input type="radio" name="iymok" title='m203-1.png|Logo 2|Text of input 2' />Choice 2</label>
        <label><input type="radio" name="iymok" title='m602-1.png|Logo 3|Text of input 3' />Choice 3</label>
    </div>
</form>
<script type="text/javascript">
    imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/';
    $("input[type='radio']").click(function() {
        var strarr = this.title.split('|');
        if (strarr.length >= 3) {
               $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', strarr[2]);
               $('#'+this.name+'_text').attr('title', strarr[2]);
        }
    });
</script>
person Tyson    schedule 17.05.2009
comment
Кажется, это не работает, плюс я забыл упомянуть, что использую несколько форм в своем реальном коде, так что есть ли другой способ сделать это, не сообщая имя ввода текста? - person Mark; 17.05.2009
comment
А, исправлено! Помните, что атрибут id должен быть уникальным. У вас не должно быть нескольких элементов на странице с одним и тем же идентификатором. - person Tyson; 17.05.2009
comment
Почти идеально, просто нужен какой-то способ удалить текст при нажатии на него и вернуть его обратно при нажатии за пределами формы (и вернуть текст в зависимости от выбранного переключателя), поскольку он работает для выбора 1, но не для 2 других. - person Mark; 17.05.2009
comment
Он больше не меняет заголовок, даже если текст удаляется при нажатии на него, как раньше… Это работает для вас? - person Mark; 18.05.2009
comment
Ты был очень полезен, Тайсон, но Хосе Базилио дал лучший ответ. Спасибо, в любом случае. - person Mark; 18.05.2009