如何在此Javascript中添加if / else语句？

Question

我创建了一个带有下拉菜单的表格，该表格将用作比较图表。当用户从下拉列表中选择产品时，下面列中的单元格将填充存储在数组中的产品详细信息。

到目前为止，这工作得很好但我在向脚本添加if / else语句时遇到问题，因此我们不会只是听col2的下拉列表，而是检测col3或col4中的产品选择。 / p>

$(".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 for“logo”以更改图像的src，例如产品徽标。我一直在寻找Stack Overflow和其他一些网站，但我不知道自己解决这两个问题中的任何一个...是的，我不是一个大的java大师，但任何帮助都非常感激。

代码也在my jsfiddle

上

Answer 1

请试试这个：

只需在您的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;
        }
    });

});

Answer 2

我不确定我是否理解你的意图。我想你是说你可以用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/

Answer 3

认为我自己已经解决了，除非有人能想到更好的方法。我已将所有选择元素更改为“选择”，对脚本执行相同操作并添加了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;
    }
});

});

工作正常，更新了fiddle

Answer 4

您可以尝试执行以下操作：

$(".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