Question

我是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>

Answer 1

有许多东西可以用你的JS进行优化，但主要的问题是你用所有三个按钮的值设置newval。快速回答是使用var newval = $（this）.val（）代替。

问题在于您获得了点击按钮的值，而按钮本身没有值。你也在与ids进行比较。

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

var clicked = $(this);

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

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

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

jQuery - 用于披萨打顶的3种切换开关

2 个答案: