0

jQuery のトグル機能を使用して、3 つのアイテムを含むボックスを作成しています。ユーザーがオプションの 1 つを選択すると、ボックスは、ページの下部にある合計ボックスにオプションの価格を表示し、選択したボックスのコンテンツ領域にあるチェックボックスに関連付けられたコストを追加する必要があります。このサイトから変更されたトグル ボックスを持つ 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 に答える