Como alterar o título de alguma entrada de texto, dependendo de uma rádio com jquery?
-
22-08-2019 - |
Pergunta
Como você pode ver em http://jsbin.com/erivi/ Eu estou usando jQuery para mudar alguma imagem (e atributo de imagem), dependendo do botão de rádio selecionado, eu também estou removendo texto formulário ao clicar no seu interior.
E agora o que estou tentando fazer é mudar o texto da forma, dependendo do botão de rádio marcada.
Por exemplo, quando clicar em "Opção 3" devemos ver "Texto de entrada 3".
Você pode ver e editar o meu código de viver aqui: http://jsbin.com/erivi/edit
A parte que eu preciso melhorar é:
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]);
});
E, particularmente .attr('title', starr[2]);
que é suposto título mudança dependendo da 3ª parte do meu título de rádio (exemple: title='m602-1.png|Logo 3|Text of input 3'
)
Obrigado:)
Edit: Esqueci de mencionar que eu estou usando várias formas no meu código real, é por isso que eu estou procurando uma maneira de fazer isso sem o nome específico da entrada de texto, a fim de evitar a repetição de script para outro texto entrada.
Solução
EDIT: O ID da caixa de texto de entrada tem de ser único. Além disso, você precisa .attr('title',strarr[2])
set, .val(strarr[2])
ea classe dica dentro de evento de clique do botão de rádio. Além disso, algumas mudanças precisam ser feitas para o seu plugin inputdynvalue
.
Por favor, veja o código de trabalho completa e actualizada em http://jsbin.com/akawo
Atualização Plug-in de código
(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();
});
Button Radio Atualizado Clique manipulador de eventos
$("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');
});
Outras dicas
Tente isto:
<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>