0

我有一个产品轮播，其中包含多个select控件和每个控件的图像。每个select元素都有相同的变化函数：

                $('#abcFlavor')
                .add('#furyFlavor')
                .add('#mrpFlavor')
                .add('#proFlavor')
                .change(function () {
                    //some code...
            });

这是html的示例：

    <div class="shop-latest-carousel">
    <ul id="latest_products">
        <li>
            <form target="" action="..." method="post">
                <div class="product-list-item">
                    <span class="hover"></span>
                    <div class="image" id="imageABC">
                        <a>
                            <img id="ABC_grape" src="images/shop_images/ABC_grape.png" alt=""></a>
                    </div>
                    <div class="details fixclear">
                        <h3>ABC</h3>
                        <label for="abcFlavor">Flavor:</label>
                        <select name="os0" id="abcFlavor">
                            <option id="grape" value="Grape">Grape $2.99 USD</option>
                            <option id="peach" value="Peach">Peach $22.99 USD</option>
                            <option id="watermelon" value="Watermelon">Watermelon $12.99 USD</option>
                            <option id="cherry" value="Cherry">Cherry $12.99 USD</option>
                            <option id="lemonade" value="Lemonade">Lemonade $5.99 USD</option>
                        </select>
                        <div class="actions">
                            <input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt="">
                        </div>
                        <div class="price">
                            $<span>52.99</span>
                            <small>$67.49</small>
                            <br /><br />
                        </div>
                    </div>
                </div>
                <input type="hidden" name="on0" value="Flavors">
            </form>
            <!-- end ABC -->
        </li>
        <li>
            <form target="" action="..." method="post">
                <div class="product-list-item">
                    <span class="hover"></span>
                    <div class="image" id="imageFury">
                        <a>
                            <img id="img_fury_lemonlime" src="images/shop_images/Fury_lemonlime.png" alt=""></a>
                    </div>
                    <div class="details fixclear">
                        <h3>Fury</h3>
                        <label for="furyFlavor">Flavor:</label>
                        <select name="os0" id="furyFlavor">
                            <option id="lemonline" value="Lemon-Lime">Lemon-Lime $19.99 USD</option>
                            <option id="melon" value="Melon">Melon $9.99 USD</option>
                        </select>
                        <div class="actions">
                            <input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt="">
                        </div>
                        <div class="price">
                            $<span>39.99</span>
                            <small>$47.24</small>
                            <br /><br />
                        </div>
                    </div>
                </div>
                <input type="hidden" name="on0" value="Flavors">
            </form>
            <!-- end Fury -->
        </li>
    </ul>
</div>

如何对select触发事件的元素的“id”（不是所选选项的“id”）执行 switch 语句？

我试过这样的事情：

var sel = $(this).parent().attr("id");

但它不断返回“未定义”。

4

1 回答 1

3

在事件处理程序回调中，this是 DOMselect元素，所以：

switch (this.id) {
    case "abcFlavor":
        // ...
        break;
    // and so on
}

示例（仅显示id，但此时您当然可以switch使用它）：Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>jQuery 'this' example</title>
</head>
<body>
  <label>abcFlavor: <select id="abcFlavor">
    <option>One</option>
    <option>Two</option>
    <option>Three</option></select></label>
  <br><label>furyFlavor: <select id="furyFlavor">
    <option>One</option>
    <option>Two</option>
    <option>Three</option></select></label>
  <br><label>mrpFlavor: <select id="mrpFlavor">
    <option>One</option>
    <option>Two</option>
    <option>Three</option></select></label>
  <br><label>proFlavor: <select id="proFlavor">
    <option>One</option>
    <option>Two</option>
    <option>Three</option></select></label>
  <script>
    (function($) {
      $('#abcFlavor')
      .add('#furyFlavor')
      .add('#mrpFlavor')
      .add('#proFlavor')
      .change(function () {
        display("You changed " + this.id);
      });

      function display(msg) {
        $("<p>").html(String(msg)).appendTo(document.body);
      }
    })(jQuery);
  </script>
</body>
</html>

旁注：您可以add在选择器中使用逗号跳过所有这些调用：

$('#abcFlavor, #furyFlavor, #mrpFlavor, #proFlavor').change(function () {
  // Code here
});
于 2013-06-06T17:53:43.303 回答