0

我正在使用 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));
}
4

1 回答 1

0

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

选择标题后，如何捕获所选标题框的 id。

当一个标题被选中时，你可以ID使用 jQuery 获取当前选中标题的$(this)

$(".toggle-title").click(function(){
    var ID = $(this).attr("id");
    alert(ID);
});
于 2013-03-17T15:27:54.407 回答