javascript
  • html5
  • 2012-08-14 19 views 11 likes 
    11

    Gibt es eine Möglichkeit, alle 3 Datenwerte von diesem Element zu erhalten?Ist es möglich, mehrere Datenattribute {Name} in HTML5 zu haben?

    <div id="viewport" 
        data-requires='js/base/paths' 
        data-requires='js/base/dialog' 
        data-requires='js/base/notifier'> 
    

    Dies wäre wirklich nützlich für ein Projekt, das ich beginne. Mit diesem konnte ich erforderliche js Module laden und sie mit dem Dom verbinden. Ich weiß, es klingt seltsam, aber ich versuche hier etwas Neues.

    +2

    Sie wahrscheinlich bedeutete Daten benötigt. Ich glaube nicht, dass du das kannst. Warum nicht alle zusammenstellen? data-requires = 'js/base/Pfade | js/base/dialog | js/base/notifier' –

    +0

    Ich denke, ich bleibe dabei, sie alle zusammen zu setzen. Der einzige Grund für das Schreiben von 3 war, dass es für neue Entwickler, die dem Team beitreten, schön aussieht. –

    +0

    Ja, es wäre schön, das tun zu können –

    Antwort

    3

    Sie könnten sie alle in einen zusammenfassen, wenn Sie sie durch etwas getrennt haben, dann teilen Sie sie auf und legen Sie sie in ein Array.

    // oops here's plain JS 
    var arrayData = document.getElementById('viewport').getAttribute('data-requries'); 
    var arr = arrayData.split(','); 
    
    for (i = 0; i < arr.length; i++) { 
        console.log(arr[i]); 
    } 
    

    http://jsfiddle.net/S7D2D/1/

    16

    Die Antwort auf Ihre Frage ist, dass HTML nicht mehrere Instanzen derselben Eigenschaft nicht unterstützt. Bei allen typischen Methoden zum Abrufen dieses Attributs wird nur eines der drei abgerufen.

    Der übliche Weg zur Lösung dieses Problems besteht darin, eine einzelne Instanz des Attributs zu verwenden und mehrere Pfade als Wert anzugeben. Für Pfade sind sie normalerweise durch Semikolons getrennt.

    Und dann Code verwenden, um das mehrwertige Attribut in ein Array aufzuteilen.

    var requiredPaths = document.getElementById("viewport").getAttribute("data-requires").split(";"); 
    
    +0

    Diese Methode funktioniert mit Foundation Dropdowns, um mehrere Datenoptionen zu ermöglichen: 'data-options =" ​​is_hover: true; align: right "'. Danke, da ich nirgendwo anders finden konnte, wie das geht. – lwalden

    7

    Sie können komplexere Strukturen innerhalb data- Attribute verwenden.

    Statt dessen:

    <div id="viewport" 
    data-requires='js/base/paths' 
    data-requires='js/base/dialog' 
    data-requires='js/base/notifier'> 
    

    Sie können dies tun:

    <div id="viewport" 
    data-requires='["js/base/paths", "js/base/dialog", "js/base/notifier"]'> 
    </div> 
    

    Proof mit jQuery.data() (die nur das Array ruft auf diese Weise: jQuery('#viewport').data('requires')) ist hier: http://jsfiddle.net/3StZs/

    +0

    Neugierig, wenn es irgendwelche Browser würde auf diesem ... Drosselung –

    +0

    @rohit_wason: Warum machen Sie sich Sorgen darüber? Diese Technik gibt es seit Jahren, und höchstwahrscheinlich werden sogar die heruntergekommenen Browser unterstützt (obwohl sie erstens nicht mehr verwendet werden sollten und zweitens die jQuery-Version diese unterstützen müsste). Gibt es spezielle Bedenken, die Sie diesbezüglich haben? jQuery scheint mit sehr alten Browsern ziemlich kompatibel zu sein, wenn Sie viel älter sind, müssen Sie möglicherweise eine ältere Version von jQuery verwenden, um es zu unterstützen. – Tadeck

    +0

    In meinem ursprünglichen Kommentar ging es darum, wirklich mehrere Attribute zu verwenden. Ich glaube nicht, dass ich die Frage gründlich gelesen habe. Ich sehe jetzt. –

    Verwandte Themen