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

Question

I've created a table with a dropdown menu which will be used as a comparison chart. When the user selects a product from the dropdown the cells in the column bellow are populated with the details of the product which are stored in an array.

So far this is working great but I'm having a problem to add a if/else statement to the script so that instead of just listening to the dropdown of col2 we would also detect a product selection from col3 or col4.

$(".select2").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
}

As you can see right now I'm listening to the change in the dropdown "select2" which has the class col2 and then writes to the td's with the ID col2. I can't beat my had around how I can make the script also detect a change to col3 and col4.

The full table

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

The 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;
    }
});

});

I would also like to change the jQuery for "logo" to change the src of an image like the products logo for example. I've been looking around Stack Overflow and some other sites but can't figure out to solve either one of the two problems myself... yes, I'm not a big java guru but any help is much appreciated.

The code is also up on my jsfiddle

Answer 1

Please try this:

Just replace this in your javascript file.

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

I'm not sure I understand you intention. I think you're saying that you can respond to a change event of the select element with the class=select2, but you're unsure of how to achieve the same functionality with the other 2 elements.

If that's the case, just add another onchange handler for each - ie:

$(".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 here: http://jsfiddle.net/enhzflep/ddXYt/7/

Answer 3

Think I've solved it myself unless someone can think of a better way of doing this. Ive changed all select elements to "select", did the same for the script and added the if/else statement.

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

});

Works fine,updated the fiddle

Answer 4

You can try to do something like:

$(".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;
        }
    });
});​

Here you have the examle jsfiddle