Question

我有一个选择元素......

    <select id="<? echo $rows['itemname']; ?>" class="weight">
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
    </select>

运行PHP查询时，这将导致各种选择框。

示例：

<select id="Roast_Beef" class="weight" >
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="Ham" class="weight" >
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="Turkey" class="weight">
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>

我的目标

我希望每个选择框在选择选项时SHRINK，但我不确定如何正确使用变量，以便单独处理每个元素。

在尝试不同的事情时，我得到的最远的是用重量级缩小任何东西，但明显的问题是它缩小了所有选择框，因为它们都将具有WEIGHT类元素。

$(".weight").change(function() {
$( ".weight" ).toggle({ effect: "scale", direction: "horizontal" });   //Then you scale EVERYTHING with WEIGHT class        
});

Answer 1

也许这就是你要找的东西：

$(".weight").change(function() {
  $( this ).toggle({ effect: "scale", direction: "horizontal" });
});

Answer 2

使用$(this)来访问当前更改的元素，而不是$(".weight")。

＆＃13;

$(".weight").change(function() {
  $(this).toggle({
    effect: "scale",
    direction: "horizontal"
  }); //Then you scale EVERYTHING with WEIGHT class        
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Roast_Beef" class="weight">
  <option disabled selected value>-- Select Quantity --</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select id="Ham" class="weight">
  <option disabled selected value>-- Select Quantity --</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select id="Turkey" class="weight">
  <option disabled selected value>-- Select Quantity --</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

＆＃13;

Answer 3

使用select.weight仅定位具有该类的选择，然后使用this来引用它：

$("select.weight").change(function() {
    $(this).toggle({ effect: "scale", direction: "horizontal" });
});

选中后缩小HTML选择元素

3 个答案: