2016-05-27 12 views
1

Ich möchte ID von UL-Element nach dem Klicken auf li-Element dynamisch ändern. Dann übergebe ich diese ID an str Variable als String. Ein Beispiel, wenn ich auf Driver 2 Klicken id ul ändert für,Wie ID von ul nach Klick auf li-Element wechseln?

ich so etwas wie dieses haben "driver_id = 2?":

<ul class="drivers" id=""> 
    <li><a href="" id="?driver_id=1">Driver 1</a></li> 
    <li><a href="" id="?driver_id=2">Driver 2</a></li> 
    <li><a href="" id="?driver_id=3">Driver 3</a></li> 
</ul> 

und jquery:

var str=$('ul.drivers').attr('id'); 
+4

Ich würde Ihnen dringend empfehlen, dies nicht zu tun. ID-Attribute sind nicht als vorübergehend zu verstehen. Wenn Sie Elemente dynamisch identifizieren möchten, ändern Sie stattdessen ihre Klassen. –

+3

Aufbauend auf dem, was @Rory gesagt hat, "id's sollen auch einzigartig sein - was Sie vorschlagen, würde mit einer doppelten ID enden. –

+1

Vereinbart mit @RoryMcCrossan. Aber trotzdem, wenn du wissen willst, wie es geht, probiere dieses '$ ('ul.drivers') .attr ('id', 'my_new_id');' – nikhil

Antwort

1

Die Verwendung des id Attributs ist keine großartige Idee, da sie eindeutig sein müssen und nicht im gesamten DOM geändert werden sollten.

Stattdessen scheint die data Attribut eine bessere Verwendung.Sie können das Attribut gesetzt, und auf dessen Wert so etwas wie dies mit:

HTML

<ul class="drivers" id="list"> 
    <li><a href="#" data-driver="?driver_id=1">Driver 1</a></li> 
    <li><a href="#" data-driver="?driver_id=2">Driver 2</a></li> 
    <li><a href="#" data-driver="?driver_id=3">Driver 3</a></li> 
</ul> 

JavaScript

$(document).ready(function() { 
    $('#list li a').on('click',function() { 
    var str = $(this).data('driver'); 
    console.log(str); 
    }) 
}) 

Hier ist es in einem JS Fiddle Beispiel: https://jsfiddle.net/igor_9000/wh3v1wsk/

Hoffe, dass hilft!

+0

Du hast mir sehr geholfen! Ich habe noch eine Frage. Wenn ich Daten von ul-Liste zu diesem PHP-Skript übergebe, antwortet es mir etwas json und dann zieht mein JS-Rahmendiagramm ein. Es funktioniert perfekt. Aber dieses JS-Skript hat eine Intervallfunktion, die das Diagramm aktualisieren sollte. Es funktioniert nicht. Ich habe Probleme mit der Weitergabe von str Variablen an diese Funktion. Fehler sagt, dass str nicht definiert ist. Hier ist der Code von index.php http://pastebin.com/Zzy0YEPi – pkosmicki

+0

@pkosmicki wäre es gut, eine neue Frage dafür zu starten. Wenn Sie eine neue Frage öffnen, geben Sie bitte [MCVE] (http://stackoverflow.com/help/mcve) an. Das Pastbin ist nicht besonders hilfreich, da es das Problem nicht reproduziert. Auch, wenn die Antworten hier nützlich waren, bitte upvote und wählen Sie eine als die akzeptierte Antwort. –

1

wie einige der erwähnten Kommentare, ist dies keine gute Idee. Das id Attribut soll einzigartig sein, also, indem Sie die ID auf die ID eines der li setzen, Sie erstellen zwei IDs auf Ihrer Seite, die eine von ihnen maskiert, wenn Sie versuchen, es erneut zu suchen.

aber wenn Sie versuchen, Attribute mit Jquery zu ändern, das zweite Argument von attr verwenden, um den attrib

$('ul.drivers').attr('id', value) 

zu setzen, wenn Sie Klasse verwenden möchten, statt id, verwenden jquerys addClass Methode.

$('ul.drivers').addClass(value) 

obwohl ich empfehlen würde eine benutzerdefinierte Daten-Attribut

$('ul.drivers').data('some-name', value) //=> set value 
$('ul.drivers').data('some-name') //=> get value 
0

Statt die ID zu ändern, ein Datenattribut, wie folgt erstellen:

<ul class="drivers" id="driverlist-1" data-active-driver-id=""> 
    <li><a href="" id="?driver_id=1">Driver 1</a></li> 
    <li><a href="" id="?driver_id=2">Driver 2</a></li> 
    <li><a href="" id="?driver_id=3">Driver 3</a></li> 
</ul> 

<ul class="drivers" id="driverlist-2" data-active-driver-id=""> 
    <li><a href="" id="?driver_id=4>Driver 4</a></li> 
    <li><a href="" id="?driver_id=5">Driver 5</a></li> 
    <li><a href="" id="?driver_id=6">Driver 6</a></li> 
</ul> 

Datenattribute gemeint sind zu speichern Daten müssen Sie aus irgendeinem Grund steuern. Bitte beziehen Sie sich auf this link.

Dann Sie es wie folgt ändern, Ihre ul mit seiner ID zugreifen, denn denken, wenn man zwei uls hatte jeder mit seinen eigenen Treiber, dann würden Sie die richtige eine Garantie würde geändert:

$('#driverlist-1').data('active-driver-id', value); // setting some value to it 
var str = $('#driverlist-1').data('active-driver-id'); // getting stored value 

wobei value die ID der angeklickt li ist. Ich würde empfehlen, dem zu folgen, auch wenn Sie überhaupt keine zwei Listen haben, nur um gute Praktiken beizubehalten.

Verwandte Themen