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

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

1 голос
/ 17 мая 2009

Как вы можете видеть на 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')

Спасибо:)

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

Ответы [ 2 ]

2 голосов
/ 18 мая 2009

РЕДАКТИРОВАТЬ: Идентификатор вводимого текстового поля должен быть уникальным. Кроме того, вам нужно установить .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(); 
});

Обновлен обработчик событий щелчка переключателем 

$("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'); 
});
1 голос
/ 17 мая 2009

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

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