Ich habe eine von PHP erstellte Liste, deren Listenelemente mit dem Jquery-Widget auswählbar sind. Die Liste für alle Absichten und Zwecke ist:
<ul id="#select-image">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ul>
Die auswählbare jQuery wird wie folgt deklariert:
<script>
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').innerHTML;
console.log($variable);
}
});
});
</script>
Ein Ereignis findet statt, nachdem ein Listenelement ausgewählt wurde. In diesem Beispiel wird es an die Browserkonsole ausgegeben. Die Ausgabe ist jedoch "undefined". Der Selektor $('.ui-selected').
ist korrekt, da er als Objekt in der Browserkonsole angezeigt wird. Wohin gehe ich falsch?
Verwenden Sie .val()
anstelle von .innerHTML
, um den Wert der ausgewählten Option abzurufen
Verwenden Sie .text()
, um den Text der ausgewählten Option abzurufen
Danke für die Korrektur :)
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').html();
console.log($variable);
}
});
});
oder
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').text();
console.log($variable);
}
});
});
oder
$(function() {
$("#select-image").selectable({
selected: function( event, ui ) {
var $variable = $('.ui-selected').val();
console.log($variable);
}
});
});
Der Parameter ui
hat eine Eigenschaft namens selected
, die eine Referenz auf das ausgewählte dom-Element darstellt. Sie können innerHTML
für dieses Element aufrufen.
Ihr Code $('.ui-selected').innerHTML
versucht, die innerHTML
-Eigenschaft eines jQuery-Wrapper-Elements für ein dom-Element mit der Klasse ui-selected
zurückzugeben.
$(function () {
$("#select-image").selectable({
selected: function (event, ui) {
var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
console.log($variable);
}
});
});
Demo: Fiddle