Erstes Element geklickt Zeige erstes Modal, zweites Element geklickt Zeige zweites Modal

Wie im Thread. Ich möchte zuerst modal zeigen, indem ich auf das erste 'td' klicke. Als nächstes möchte ich das zweite Modal anzeigen, indem ich auf das zweite "td" klicke und so weiter. Wie kann ich thbis mit einer Klasse nicht in IDs tun? Hier ist das Beispiel.Erstes Element geklickt Zeige erstes Modal, zweites Element geklickt Zeige zweites Modal

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <table> 
    <tr> 
     <td>td</td> 
     <td>td</td> 
     <td>td</td> 
    </tr> 

    <tr> 
     <td>td</td> 
     <td>td</td> 
     <td>td</td> 
    </tr> 
    </table> 

    <div class="modal">modal1</div> 
    <div class="modal">modal2</div> 
    <div class="modal">modal3</div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</body> 
</html>

https://jsfiddle.net/znzjeaq4/

Quelle

2017-05-22 Hvrxld

Dies ist, was IDs gemacht werden für. Warum kannst du sie nicht benutzen? –

Haben Sie versucht [nth Kind Selektoren] (https://api.jquery.com/nth-child-selector/)? – Draco18s

@Stephen S Ich weiß, dass ich IDs verwenden kann, aber ich weiß nicht, wie viele Elemente ich verwenden werde, so dass ich Klassen verwenden muss. Ja, ich habe es versucht, gleich viel Code. – Hvrxld

JSFiddle

Sie möchten IDs zu Ihren TDs und Modalverben zuweisen:

<table> 
    <tr> 
     <td id="1">td</td> 
     <td id="2">td</td> 
     <td id="3">td</td> 
    </tr> 

    <tr> 
     <td id="4">td</td> 
     <td id="5">td</td> 
     <td id="6">td</td> 
    </tr> 
    </table> 

    <div class="modal" id="m1">modal1</div> 
    <div class="modal" id="m2">modal2</div> 
    <div class="modal" id="m3">modal3</div> 
    <div class="modal" id="m4">modal4</div> 
    <div class="modal" id="m5">modal5</div> 
    <div class="modal" id="m6">modal6</div>

Und dann, auf TD klicken, wird die ID erhalten und verwenden Sie dann, dass ID für das modale:

$("td").click(function() { 
    var id = $(this).attr("id"); 
    $("#m" + id).show(); 
})

Quelle

2017-05-22 14:17:25

Prost. Das ist, was ich will. ;) – Hvrxld

CSS

So wird das erste Beispiel n-Kind mit unter den mehreren Klassenelemente zu wählen, und zu wählen, dann: aktiv /: Fokus eine Aktion auf dem Klick einzuleiten.

.modal { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    margin-right: 20px; 
 
    cursor: pointer; 
 
} 
 

 
.modal:nth-child(1):active, 
 
.modal:nth-child(1):focus { 
 
    background: green; 
 
} 
 
.modal:nth-child(2):active, 
 
.modal:nth-child(2):focus { 
 
    background: blue; 
 
} 
 
.modal:nth-child(3):active, 
 
.modal:nth-child(3):focus { 
 
    background: red; 
 
}

<div class="modal"></div> 
 
<div class="modal"></div> 
 
<div class="modal"></div>

Mit JavaScript Sie jede Klasse wählen können, wenn sie nicht eine ID hat, durch etwas Ähnliches wie CSS die n-te-Kind tun, die ('modal')[0] ist . Also, document.getElementsByClassName packt alle .modal divs und ('modal')[0], ('modal')[1], ('modal')[3] wäre, wie Sie jeweils auf (beginnend mit "0" als das erste der Elemente, die Sie durch zählen.) Das JS-Beispiel kann detaillierter, aber dies einfach konzentriert sich auf „das Klicken, das tun ...“ (als ob Sie ein verwandtes modal starten wurden klicken.)

var modal_001 = document.getElementsByClassName('modal')[0]; 
 
var modal_002 = document.getElementsByClassName('modal')[1]; 
 
var modal_003 = document.getElementsByClassName('modal')[2]; 
 

 
modal_001.addEventListener('click', function() { 
 
    this.style.background = "green"; 
 
}); 
 

 
modal_002.addEventListener('click', function() { 
 
    this.style.background = "blue"; 
 
}); 
 

 
modal_003.addEventListener('click', function() { 
 
    this.style.background = "red"; 
 
});

.modal { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    margin-right: 20px; 
 
    cursor: pointer; 
 
}

<div class="modal"></div> 
 
<div class="modal"></div> 
 
<div class="modal"></div>

Quelle

2017-05-22 14:28:50

Erstes Element geklickt Zeige erstes Modal, zweites Element geklickt Zeige zweites Modal

Antwort

Verwandte Themen