Ako zmeniť názov niektorého textu v závislosti od rádia s jquery? - jquery, rádiové tlačidlo, názov, zadanie textu

Ako môžete vidieť na http://jsbin.com/erivi/ Používam program JQuery na zmenu niektorých obrázkov (a atribútov obrázkov) v závislosti na vybratom prepínači. Pri kliknutí do jeho vnútra tiež odstraňujem text formulára.

A teraz sa pokúšam zmeniť text formulára v závislosti na začiarknutom prepínači.

Napríklad po kliknutí na „Voľba 3“ by sa malo zobraziť „Text vstupu 3“.

Môj kód môžete vidieť a upraviť naživo tu: http://jsbin.com/erivi/edit

Časť, ktorú musím vylepšiť, je:

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

A zvlášť .attr("title", starr[2]); ktorý má zmeniť názov v závislosti od 3. časti môjho rozhlasového titulu (príklad: title="m602-1.png|Logo 3|Text of input 3" )

Vďaka :)

Upraviť:Zabudol som spomenúť, že na svojom skutočnom kóde používam niekoľko formulárov, preto hľadám spôsob, ako to urobiť bez konkrétneho názvu zadávania textu, aby sa zabránilo opakovaniu skriptu pre iné zadávanie textu.

odpovede:

2 pre odpoveď č. 1

EDIT: ID vstupného textového poľa musí byť jedinečné. Ďalej je potrebné nastaviť .attr("title",strarr[2]), .val(strarr[2]) a trieda rád vo vnútri udalosti kliknutia na prepínač. Vo vašom priečinku. je tiež potrebné vykonať určité zmeny inputdynvalue zapojiť.

Celý aktualizovaný pracovný kód nájdete na stránke http://jsbin.com/akawo

Aktualizovaný kód doplnku

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

Aktualizovaný prepínač Kliknite na obsluhu udalosti

$("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 pre odpoveď č. 2

Skúste to:

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

---