Datenauswahl mit jQuery funktioniert nicht

Question

Ich habe versucht, ein JSFiddle für ein Beispiel für einen Selektor zu erstellen, den ich versuchte zu verwenden, und es funktioniert nicht. Kann jemand es sehen und mir sagen, was ich falsch gemacht habe?

Hier ist die Geige: https://jsfiddle.net/j3cmo4ow/4/

wurde Mein Code durch dieses Beispiel inspiriert: http://api.jqueryui.com/data-selector/

$(":data(date)").each(function() { 
    var element = $(this); 
    element.css("backgroundColor", element.data("color")); 
}); 

Answer 1

Sie möchten einen Attributselektor:

$("[data-date]") 

Fiddle: https://jsfiddle.net/j3cmo4ow/5/

Wenn der Pseudo-Selektor :data funktionieren soll, müssen Sie jQuery UI hinzufügen.

Answer 2

$("[data-color]").each(function() { 
    var element = $(this); 
    element.css("backgroundColor", element.attr('data-color')); 
}); 

Fiddle: https://jsfiddle.net/j3cmo4ow/8/

Answer 3

Dies schlägt fehl, weil die jQueryUI Bibliothek über http aufgerufen wird, während die Geige selbst über https geladen wird.

Daher wird das Skript als unsicher angesehen.

Wenn Sie Ihre Geige mit der Konsole ausführen öffnen Sie die folgende Fehlermeldung angezeigt:

Mixed Content: The page at 'https://jsfiddle.net/j3cmo4ow/4/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS. 

Answer 4

Ihr Problem mit Wahl $(":data(date)") Sie alle Elemente mit dateData mit diesem Selektor zur Auswahl: $("*[data-date]")

var dateDiv = null; 
var expenseDate = "06/22/2016"; 
$("*[data-date]").each(function() { 
    var element = $(this); 
    element.css("background-color", element.attr('data-color')); 
}); 

---

var dateDiv = null; 
 
var expenseDate = "06/22/2016"; 
 

 
$("*[data-date]").each(function() { 
 
    var element = $(this); 
 
    element.css("backgroundColor", element.data("color")); // Also works if you want. 
 
});

.expense-item { 
 
    margin-left: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="contentWrapper"> 
 
    <div data-date="06/22/2016" data-color="red"> 
 
     06/22/2016 
 
     <div class="expense-body"> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (1) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (2) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (3) 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div data-expense-date="06/23/2016" data-color="blue"> 
 
     <div class="expense-body"> 
 
      06/23/2016 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (1) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (2) 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div data-expense-date="06/24/2016" data-color="yellow"> 
 
     <div class="expense-body"> 
 
      06/24/2016 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (1) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (2) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (3) 
 
       </p> 
 
      </div> 
 
      <div class="expense-item"> 
 
       <p> 
 
        This is an expense (4) 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 5

Die :data() Wähler nicht weg von HTML-basierte funktionieren Attribute mit dem Präfix data-.

Stattdessen stimmt es überein und Elemente, die Daten über die jQuery-Funktion .data("foo", value) gespeichert haben.

Answer 6

Beachten Sie, dass der Selektor :data() Teil von jQuery UI ist und nicht Teil der jQuery-Kernbibliothek ist. Wenn Sie also jQuery UI nicht einschließen, wird erwartet, dass dieser Selektor nicht funktioniert.