jQuery - 用于披萨浇头的 3 向切换开关答案

【问题标题】：jQuery - 3 way toggle switch for Pizza toppingjQuery - 用于披萨浇头的 3 向切换开关
【发布时间】：2014-12-05 01:56:03
【问题描述】：

我是 js/jQuery 新手，如果这是一个重复的问题，请原谅我！我正在尝试建立比萨订购网站，通过单击浇头的图像按钮将浇头放置在面团图像上或将其删除。所有浇头必须有 3 个阶段，左侧、整体和右侧。然后我必须通过 ajax/php 将选定的浇头发布到服务器。

我已经测试了 ajax/php 模块及其工作。但是，我被困在 jQuery 部分，这就是我目前所拥有的：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>topping placement</title>

    <style type="text/css">

    .ButtonClicked {
    background-color:#8C0221;
    }

    .thumb{
      float:left;
      width:100px;
      height:100px;
      cursor:pointer;
      }
      .crust{
      float:right;
      padding:100px;
      width:220px;
      height:160px;
      cursor:pointer;
      position:absolute;
      }
      .toppings{
      float:right;
      padding:100px;
      width:220px;
      height:160px;
      cursor:pointer;
      position:absolute;
      display: none;
      opactiy: 0;
      }
      .button-whole{
      background-image: url(../images/button-whole.png);   
      background-repeat: no-repeat; 
      border: none;
      width:30px;
      height:30px;
      cursor:pointer;
      }
      .button-l{
      background-image: url(../images/button-l.png);   
      background-repeat: no-repeat; 
      border: none;
      width:30px;
      height:30px;
      cursor:pointer;
      }
      .button-r{
      background-image: url(../images/button-r.png);   
      background-repeat: no-repeat; 
      border: none;
      width:30px;
      height:30px;
      cursor:pointer;
      }
    </style>

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>

<div id="topping-buttons">
<button id="pep-l" class="button-l" type="submit"></button>
<button id="pep-w" class="button-whole" type="submit"></button>
<button id="pep-r" class="button-r" type="submit"></button>
</div>

<img class="crust" src="../images/crust/thinNcrispy.png" alt="" />
<pepperoni>
<img class="toppings" src="../images/toppings/pepperoni.png" alt="" />
</pepperoni>
<olives_black>
<img class="toppings" src="../images/toppings/olives_black.png" alt="" />
</olives_black>

<script>
    $("#topping-buttons button").click(function() {
        var newval = $("#topping-buttons button").val();
        if (newval == "#pep-l"){
            $( "#pep-l" ).toggleClass('ButtonClicked');
            $( "pepperoni img" ).fadeToggle( "fast", "linear" );
        } else if (newval == "#pep-w"){
            $( "#pep-w" ).toggleClass('ButtonClicked');
            $( "pepperoni img" ).fadeToggle( "fast", "linear" );
        } else if (newval == "#pep-r"){
            $( "#pep-r" ).toggleClass('ButtonClicked');
            $( "pepperoni img" ).fadeToggle( "fast", "linear" );
        }
    });
</script>
</body>
</html>

【问题讨论】：

请详细说明卡住是什么意思？到目前为止你得到了什么？
我已经设法完成了 ajax 部分，但无法让 jquery 部分工作。我让这个 jquery 可以使用 2 个按钮（带切换），但我不知道如何使用 3 个按钮。

标签： jquery switch-statement toggle

【解决方案1】：

您的 JS 可以优化很多东西，但主要问题是您正在使用所有三个按钮的值设置 newval。快速的答案是使用 var newval = $(this).val() 代替。

那里的问题是您获得了单击按钮的值，而按钮本身没有值。您还在与 id 进行比较。

按照您使用的模式，这样的事情会起作用：

var clicked = $(this);

if (clicked.is('#pep-l')) {
// do stuff
} else if (clicked.is('#pep-w')) {
// do stuff
} else {
// do stuff
}

这会检查 $(this)（单击的按钮）是否与您要检查的选择器相同。同样，还有很多事情可以做得更好——以一种不那么明确的方式——但它应该像你期望的那样发挥作用。

【讨论】：

【解决方案2】：

您可以尝试获取点击按钮的id，尝试以下方法：

$("#topping-buttons button").click(function() {
    var newval = $(this).prop("id");
    if (newval == "pep-l"){
        alert("pep-l");
    } else if (newval == "pep-w"){
        alert("pep-w");
    } else if (newval == "pep-r"){
        alert("pep-r");
    }
});

【讨论】：