Question

我如何将下面的这两个JavaScript和Jquery函数组合到一个JavaScript或一个Jquery函数中。

所有这一切都是在启动功能时转到网址。

function addToCart(){
    var productCode = document.getElementById("getquantity").value;
    location = "some url";
}

Jquery中的这个验证了下拉选择。如果未选择任何内容，则会弹出对用户的警报。

$(".addproduct").live("click", function () {
    if ($("#getquantity")[0].selectedIndex <= 0) {
        alert("Select Quantity!");
    }
});

调用函数的html

  <form id='product_qty' name="product_qty" autocomplete="off">
<div class="gadcontainer"> <img src="images/burn_control_usEN.jpg" width="350" height="225" border="0" usemap="#burn">
  <map name="burn">
    <area shape="rect" coords="168,140,341,189" onClick="addToCart(); return false;" href="#order" title="add to cart and checkout securely">
  </map>
  <span id="showprice"><font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>
  Sales Price: <font class="font-color-red">$35.00</font></span>
  <div class="qty"> Qty:
    <select id="getquantity">
      <option value="" selected="selected">select quantity</option>
      <option value="410">(1) box $35 ea</option>
      <option value="405">(2) boxes $35 ea</option>
      <option value="406">(4) boxes $30 ea</option>
    </select>
  </div>
</div>

修改

以下是与上一页相同的3页表格。但上面的那个是在网站的每个页面上。以下内容仅在网站的一个页面上，上面的一个页面与它们在同一页面上。我不能在元素上有相同的id，所以我给每个元素后面的元素id分别为1,2和3。那么我怎样才能添加@Matt Burland创建的jquery函数来实现下面的html代码。

    <form id='burn_qty' name="burn_qty" autocomplete="off">
  <div class="gadcontainer"> <img src="images/burn_control_usEN.jpg" width="350" height="225" border="0" usemap="#burn">
    <map name="burn">
      <area shape="rect" coords="168,140,341,189" id="addToCart" title="add to cart and checkout securely">
    </map>
    <span id="showprice2"><font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>
    Sales Price: <font class="font-color-red">$35.00</font></span>
    <div class="qty"> Qty:
      <select id="getquantity2">
        <option value="" selected="selected">select quantity</option>
        <option value="410">(1) box $35 ea</option>
        <option value="405">(2) boxes $35 ea</option>
        <option value="406">(4) boxes $30 ea</option>
      </select>
    </div>
  </div>
</form>


    <form id='energy_qty' name="energy_qty" autocomplete="off">
  <div class="gadcontainer"> <img src="images/energy_mind_usEN.jpg" width="350" height="225" border="0" usemap="#mind">
    <map name="mind">
      <area shape="rect" coords="168,140,341,189" id="addToCart" title="add to cart and checkout securely">
    </map>
    <span id="showprice3"><font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>
    Sales Price: <font class="font-color-red">$35.00</font></span>
    <div class="qty"> Qty:
      <select id="getquantity3">
        <option value="" selected="selected">select quantity</option>
        <option value="409">(1) box $35 ea</option>
        <option value="407">(2) boxes $35 ea</option>
        <option value="408">(4) boxes $30 ea</option>
      </select>
    </div>
  </div>
</form>


    <form id='lean_qty' name="lean_qty" autocomplete="off">
  <div class="gadcontainer"> <img src="images/lean_green_usEN.jpg" width="350" height="225" border="0" usemap="#tea">
    <map name="tea">
      <area shape="rect" coords="168,140,341,189" id="addToCart" title="add to cart and checkout securely">
    </map>
    <span id="showprice4"><font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>
    Sales Price: <font class="font-color-red">$35.00</font></span>
    <div class="qty"> Qty:
      <select id="getquantity4">
        <option value="" selected="selected">select quantity</option>
        <option value="413">(1) box $35 ea</option>
        <option value="414">(2) boxes $35 ea</option>
        <option value="415">(4) boxes $30 ea</option>
      </select>
    </div>
  </div>
</form>

Answer 1

$(".addproduct").live("click", function () {
    if ($("#getquantity")[0].selectedIndex <= 0) {
         alert("Select Quantity!");
    } else {
         addToCart();
    }
});

修改

好吧，让我们用新的条件来做。

首先，您的HTML有一些输入元素，如SELECT，您可以从中获取各种选项。

<select id="getquantity"> <option value="" selected="selected">select quantity</option> <option value="410">(1) box $35 ea</option> <option value="405">(2) boxes $35 ea</option> <option value="406">(4) boxes $30 ea</option> </select>

但是你的HTML不包含'name'属性，所以你的表单纯粹是基于Javascript的 - 页面上会出现一个点击事件，当前值和页面被重定向到其他地方。如果您想改变这种行为 - 开始一个新问题。

其次，在那里存在一个带有'class = addproduct'的元素，它是一个按钮，链接或图像，但它存在于HTML中。由于它没有显示，实际上并不重要 - 我们只需要在您的页面上存在该元素。

完成开始条件。现在，我们希望使用单个JQuery脚本来处理此表单。

$( document ).ready(function() { ## First things first - .live() is deprecated. Let's use .on() $(".addproduct").on("click", function () { ## Using JQuery syntax we take the .val() of the select element var myval = $("#getquantity").val(); if (!myval) { alert("Select Quantity!"); } else { ## Let's build some url and go there var url = '/product_view.php?id=' + myval; window.location.href = url; } }); });

Answer 2

所以做出一些巨大的假设，因为你的问题不清楚。

// I'm assuming .addproduct is the image you are clicking on
$(".addproduct").on("click", function () {                  // use on, not live
    var quant = $("#getquantity");
    if (quant[0].selectedIndex <= 0) {
        alert("Select Quantity!");
    }
    else {
        var productCode = quant.val();    // not sure what you are doing with this since you don't use it
        location = "some url";
    }
});

请参阅此fiddle

Answer 3

function addToCart(){
  var productCode = $('#getquantity')[0].selectedIndex;
  if (productCode <= 0)
     alert("Select a product");
  else{
     var quantity =  $('#getquantity').val();
     location = "some url";
  }
}

只需这样做。

你的addToCart（）已绑定到你所在地区的onClick功能。因此，如果你不想改变它，只需将所有代码放在addToCart（）中，就像我完成的那样。

另外，如果你想删除html中的onclick（）绑定，Matt Burland的回答是正确的

将JavaScript和Jquery功能结合在一起

3 个答案: