第一個元素點擊顯示第一個模態，第二個元素點擊顯示第二個模態

喜歡在線程中。我想通過點擊第一個'td'來顯示第一個模式。接下來，我想通過點擊第二個'td'等來顯示第二個模態。我怎麼能做一個不在ID中的課程？這是一個例子。第一個元素點擊顯示第一個模態，第二個元素點擊顯示第二個模態

<!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/

來源

2017-05-22 Hvrxld

這就是ID是製造。你爲什麼不能使用它們？ –

你有沒有試過[第n個孩子選擇器]（https://api.jquery.com/nth-child-selector/）？ – Draco18s

@Stephen S 我知道我可以使用ID，但我不知道我將使用多少個元素，以便我需要使用類。是的，我嘗試過，同樣，很多代碼。 – Hvrxld

JSFiddle

你要ID指派給您的TDS和情態動詞：

<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>

然後，在TD點擊，獲取ID，然後使用該ID對於模式：

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

來源

2017-05-22 14:17:25

乾杯。這就是我想要的。 ;） – Hvrxld

CSS

所以，第一個例子是使用第n個孩子挑選和多類元素中進行選擇，然後主動/：重點啓動時點擊的動作。

.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>

使用JavaScript，您可以選擇每一個類，如果沒有一個ID，通過做類似的事情，以CSS的第n個孩子，這是('modal')[0] 。因此，document.getElementsByClassName抓住所有.modal divs和('modal')[0],('modal')[1],('modal')[3]將是你如何選擇每一個（從「0」開始作爲你要計算的第一個元素）.JS的例子可以得到更詳細的，但這簡直是着眼於「點擊這個，做...」（好像您點擊啓動相關的模式。）

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>

來源

2017-05-22 14:28:50

第一個元素點擊顯示第一個模態，第二個元素點擊顯示第二個模態

回答

相關問題