0

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

到目前为止，这工作得很好，但是我在向脚本添加 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上

4

4 回答 4

3

请试试这个：

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

});
于 2012-10-11T12:48:52.433 回答
0

我不确定我是否理解你的意图。我认为您是说您可以使用 class=select2 响应 select 元素的更改事件，但您不确定如何使用其他 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/

于 2012-10-11T12:09:33.473 回答
0

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

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

于 2012-10-11T12:58:18.370 回答
0

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

});

工作正常，更新了小提琴

于 2012-10-11T12:37:38.493 回答