[英]How can I add an if/else statement to this Javascript?
我創建了帶有下拉菜單的表格,該表格將用作比較表。 當用戶從下拉列表中選擇產品時,將在波紋管列中的單元格中填充存儲在數組中的產品詳細信息。
到目前為止,這很好用,但是我在向腳本中添加if / else語句時遇到了問題,因此我們不僅要偵聽col2的下拉列表,而且還要檢測col3或col4的產品選擇。
$(".select2").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
whichCol = "col2";
}
正如您現在所看到的,我正在偵聽下拉列表“ select2”中的更改,該列表具有類col2,然后寫入ID為col2的td。 我無法抗拒如何使腳本也檢測到col3和col4的變化。
滿桌
<h3>Product Comparision Chart Test</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="center"></th>
<th>
<select class="col2 select2">
<option>Prod1</option>
<option>Prod2</option>
<option>Prod3</option>
<option>Prod4</option>
</select>
</th>
<th>
<select class="col3 select3">
<option>Prod1</option>
<option>Prod2</option>
<option>Prod3</option>
<option>Prod4</option>
</select>
</th>
<th>
<select class="col4 select4">
<option>Prod1</option>
<option>Prod2</option>
<option>Prod3</option>
<option>Prod4</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Logo</strong></td>
<td class="col2 logo"></td>
<td class="col3 logo"></td>
<td class="col4 logo"></td>
</tr>
<tr>
<td><strong>Details 1</strong></td>
<td class="col2 d1"></td>
<td class="col3 d1"></td>
<td class="col4 d1"></td>
</tr>
<tr>
<td><strong>Details 2</strong></td>
<td class="col2 d2"></td>
<td class="col3 d2"></td>
<td class="col4 d2"></td>
</tr>
<tr>
<td><strong>Details 3</strong></td>
<td class="col2 d3"></td>
<td class="col3 d3"></td>
<td class="col4 d3"></td>
</tr>
<tr>
<td><strong>Details 4</strong></td>
<td class="col2 d4"></td>
<td class="col3 d4"></td>
<td class="col4 d4"></td>
</tr>
<tr>
<td><strong>Rating Icons</strong></td>
<td class="col2 rating"></td>
<td class="col3 rating"></td>
<td class="col4 rating"></td>
</tr>
<tr>
<td><strong>Link to website</strong></td>
<td class="center"><a href="#" target="_blank" class="button-more">link button</a></td>
<td class="center"><a href="#" target="_blank" class="button-more">Link Button</a></td>
<td class="center"><a href="#" target="_blank" class="button-more">Link button</a></td>
</tr>
</tbody>
</table>
JS
var data = {
"brokers":
{
"broker": [
{
"name": "Prod1",
"logo": "P1 Logo",
"d1": "Specs of this",
"d2": "Some Details",
"d3": "More text about this",
"d4": "Even more details here",
"rating": "3 stars"
},
{
"name": "Prod2",
"logo": "P2 Logo",
"d1": "Specs here",
"d2": "Details go here",
"d3": "wow, more text",
"d4": "Even more text and details",
"rating": "1 stars"
},
{
"name": "Prod3",
"logo": "P3 Logo",
"d1": "Specs and stuff",
"d2": "Details or some other things",
"d3": "More details go here wow",
"d4": "Almost forgot - more here",
"rating": "5 stars"
},
{
"name": "Prod4",
"logo": "P4 Logo",
"d1": "Specs, stuff etc",
"d2": "Some other things",
"d3": "What should I say",
"d4": "details go here wow",
"rating": "4 stars"
}
]}
};
$(".select2").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
whichCol = "col2";
}
$.each(data.brokers.broker, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});
我還想更改jQuery的“徽標”,以更改圖像(例如產品徽標)的src。 我一直在尋找Stack Overflow和其他一些站點,但是我自己卻想不出解決兩個問題中的任何一個...是的,我不是Java專家,但是可以提供任何幫助。
代碼也在我的jsfiddle上
請嘗試以下方法:
只需將其替換為您的javascript文件即可。
$("select").change(function() {
var jthis = $(this);
var whichCol;
if(jthis.attr("class")=="col2 select2")
{
whichCol = "col2";
}
else if(jthis.attr("class")=="col3 select3")
{
whichCol = "col3";
}
else if(jthis.attr("class")=="col4 select4")
{
whichCol = "col4";
}
$.each(data.brokers.broker, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});
我不確定我是否了解您的意圖。 我想您是說您可以使用class = select2響應select元素的change事件,但是您不確定如何與其他2個元素實現相同的功能。
如果是這樣,只需為每個添加另一個onchange處理程序-即:
$(".select3").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col3")) {
whichCol = "col3";
}
$.each(data.brokers.broker, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});
此處的JsFiddle: http : //jsfiddle.net/enhzflep/ddXYt/7/
認為除非有人能想到一種更好的方法,否則我自己已經解決了。 我已經將所有選擇元素更改為“選擇”,對腳本進行了相同的操作,並添加了if / else語句。
$(".select").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
whichCol = "col2";
} else if
(jthis.hasClass("col3")) {
whichCol = "col3";
} else if
(jthis.hasClass("col4")) {
whichCol = "col4";
}
$.each(data.brokers.broker, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});
效果很好,更新了小提琴
您可以嘗試執行以下操作:
$(".select2").change(function() {
var jthis = $(this);
var whichCol = jthis.attr("class").split(" ")[0];
$.each(data.brokers.broker, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".logo").html(v.logo);
$("td." + whichCol + ".d1").html(v.d1);
$("td." + whichCol + ".d2").html(v.d2);
$("td." + whichCol + ".d3").html(v.d3);
$("td." + whichCol + ".d4").html(v.d4);
$("td." + whichCol + ".rating").html(v.rating);
return;
}
});
});
在這里,您有示例jsfiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.