Come cambiare il titolo di qualche input di testo a seconda di una radio con jquery? - jquery, pulsante di opzione, titolo, input di testo

Come puoi vedere http://jsbin.com/erivi/ Sto usando Jquery per cambiare qualche immagine (e attributo dell'immagine) a seconda del pulsante di opzione selezionato, sto anche rimuovendo il testo dal modulo quando faccio clic al suo interno.

E ora quello che sto cercando di fare è cambiare il testo del modulo a seconda del pulsante di opzione selezionato.

Ad esempio, cliccando su "Scelta 3" dovremmo vedere "Testo di input 3".

Puoi vedere e modificare il mio codice dal vivo qui: http://jsbin.com/erivi/edit

La parte che devo migliorare è:

  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 soprattutto .attr("title", starr[2]); che dovrebbe cambiare il titolo a seconda della terza parte del titolo della mia radio (esempio: title="m602-1.png|Logo 3|Text of input 3" )

Grazie :)

Modificare: Ho dimenticato di dire che sto usando diversi moduli sul mio codice reale, ecco perché sto cercando un modo per farlo senza il nome particolare dell'input di testo per evitare di ripetere lo script per altri input di testo.

risposte:

2 per risposta № 1

MODIFICARE: L'ID della casella di testo di input deve essere univoco. Inoltre, è necessario impostare .attr("title",strarr[2]), .val(strarr[2]) e la classe di suggerimento all'interno dell'evento clic del pulsante di opzione. Inoltre è necessario apportare alcune modifiche al file inputdynvalue collegare.

Si prega di consultare il codice di lavoro aggiornato completo su http://jsbin.com/akawo

Codice plug-in aggiornato

(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();
});

Gestore eventi clic pulsante di opzione aggiornato

$("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 per risposta № 2

Prova questo:

<form method="post" action="">
<div>
<img id="iymok" src="/images/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>

---