Question

我正在使用jQuery切换功能来创建一个包含三个项目的框。当用户选择其中一个选项时，该框应在页面底部的总计框中显示该选项的价格，并添加与所选框的内容区域中的复选框相关联的成本。我试图在PHP表单中执行此操作，该表单具有从此站点修改的切换框：

<div class="toggle-box">
  <div id="opt1" class="toggle-title">"Snorkel and Serve" Trek in the Florida Keys ($395).</div>
  <div class="toggle-content">
    <input id="opt1_1" name="opt1_1" type="checkbox" value="0- I will arrive to campus by 8:00 a.m. on June 25, 2013 ready for departure for the Florida Keys." />
    <label id="opt1_1_label" for="opt1_1" class="normal">I will arrive to campus by 8:00 a.m. on June 25, 2013 ready for departure for the Florida Keys. (No Additional Cost)</label><br /><br />
  </div>
  <div id="opt2" class="toggle-title">Toggle 2</div>
  <div class="toggle-content">
    <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
  </div>
  <div id="opt3" class="toggle-title">Toggle 3</div>
  <div class="toggle-content">
    <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
  </div>
<div>

选择标题后，如何捕获所选标题框的ID？

我正在使用以下计算功能的ID：

$(document).ready(function(){
    $(".toggle-content").hide();
    $(".toggle-title").click(function(){
        $(this).next(".toggle-content").slideToggle("normal");
        $("#optionselected").val($(this).prop("id"));
        $("#toggle-box input[type='checkbox']").prop("checked", false);
        calculate( );
    });
});
$("#toggle-title div").click(function() {
    console.log("click function");
    $("#optionselected").val($(this).prop("id"));
    $("#toggle-box input[type='checkbox']").prop("checked", false);
    calculate();
});
function calculate() {
    console.log("balance : " + balance.value);
    var subtotal = 0;
    var optid = $("#optionselected").val();
    var opt1_baseprice = new String($("#opt1").text());
    var opt2_baseprice = new String($("#opt2").text());
    var opt3_baseprice = new String($("#opt3").text());
    opt1_baseprice = opt1_baseprice.substr($("#opt1").text().indexOf("$") + 1, 3);
    opt2_baseprice = opt2_baseprice.substr($("#opt2").text().indexOf("$") + 1, 3);
    opt3_baseprice = opt3_baseprice.substr($("#opt3").text().indexOf("$") + 1, 3);
    opt1_baseprice = parseFloat(opt1_baseprice);
    opt2_baseprice = parseFloat(opt2_baseprice);
    opt3_baseprice = parseFloat(opt3_baseprice);
    subtotal += (optid == "opt1") ? opt1_baseprice : 0;
    subtotal += (optid == "opt2") ? opt2_baseprice : 0;
    subtotal += (optid == "opt3") ? opt3_baseprice : 0;
    $("#toggle-box input[type='checkbox']").each(function(i) {
        subtotal += ($(this).prop("checked")) ? parseFloat($(this).val()) : 0;
    });
    $("#balance").val((($("#needbased").val() == "Yes") ? (subtotal - 50) : 0).toFixed(2));
    subtotal = ($("#needbased").val() == "Yes") ? 50 : subtotal;
    $("#amount").val(subtotal.toFixed(2));
}

Answer 1

我不确定我是否完全理解你的问题 - 这是你想要做的吗？

选择标题时，如何捕获所选标识标题框。

选择标题后，您可以使用jQuery的ID

获取当前所选标题的$(this)

$(".toggle-title").click(function(){
    var ID = $(this).attr("id");
    alert(ID);
});

如何在切换框中捕获div的id

1 个答案: