Question

我有一个产品的旋转木马，有多个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”执行switch语句（而不是所选选项的“id”）？

我尝试过这样的事情：

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

但它一直回来'未定义'。

Answer 1

在事件处理程序回调中，this是DOM select元素，因此：

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

示例（仅显示id，但此时，您当然可以switch）：Live Copy | Live Source

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

获取选择选项父级的ID

1 个答案: