jQuery-用于比萨配料的三向拨动开关_Jquery_Switch Statement_Toggle

jQuery-用于比萨配料的三向拨动开关

jquery

jQuery-用于比萨配料的三向拨动开关,jquery,switch-statement,toggle,Jquery,Switch Statement,Toggle,我是js/jQuery新手，如果这是一个重复的问题，请原谅我！我正试图建立比萨饼订购网站，通过点击顶部的图像按钮，在面团图像上添加或删除顶部。所有浇头必须有三个阶段，左侧、整体和右侧。然后我必须通过ajax/php将所选的配料发布到服务器上我已经测试了ajax/php模块及其工作原理。但是，我仍然停留在jQuery部分，到目前为止，我已经做到了这一点： <html lang="en"> <head> <meta charset="utf-8"> &

我是js/jQuery新手，如果这是一个重复的问题，请原谅我！我正试图建立比萨饼订购网站，通过点击顶部的图像按钮，在面团图像上添加或删除顶部。所有浇头必须有三个阶段，左侧、整体和右侧。然后我必须通过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>


浇头位置
.扣子{
背景色：#8C0221；
}
.拇指{
浮动：左；
宽度：100px；
高度：100px；
光标：指针；
}
.外壳{
浮动：对；
填充：100px；
宽度：220px；
高度：160px；
光标：指针；
位置：绝对位置；
}
.浇头{
浮动：对；
填充：100px；
宽度：220px；
高度：160px；
光标：指针；
位置：绝对位置；
显示：无；
透明度：0；
}
.整个按钮{
背景图像：url（../images/button-whole.png）；
背景重复：无重复；
边界：无；
宽度：30px；
高度：30px；
光标：指针；
}
.按钮-l{
背景图像：url（../images/button-l.png）；
背景重复：无重复；
边界：无；
宽度：30px；
高度：30px；
光标：指针；
}
.按钮-r{
背景图像：url（../images/button-r.png）；
背景重复：无重复；
边界：无；
宽度：30px；
高度：30px；
光标：指针；
}
$（“#顶部按钮”）。单击（函数（）{
var newval=$（“#顶部按钮”）.val（）；
如果（newval==“#pep-l”）{
$（“#pep-l”）.toggleClass（'ButtonClicked'）；
$（“辣味香肠img”）.fadeToggle（“快速”、“线性”）；
}否则如果（newval==“#pep-w”）{
$（“#pep-w”）.toggleClass（'ButtonClicked'）；
$（“辣味香肠img”）.fadeToggle（“快速”、“线性”）；
}否则如果（newval==“#pep-r”）{
$（“#pep-r”）.toggleClass（'ButtonClicked'）；
$（“辣味香肠img”）.fadeToggle（“快速”、“线性”）；
}
});

有很多东西可以通过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）是否与要检查的选择器相同。同样，还有许多事情可以做得更好——以不太明确的方式——但应该像您期望的那样发挥作用。

您可以尝试获取单击按钮的

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

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