jQuery動的に変更されたonclickクラスを持つ要素の選択と解除

Question

私は異なるIDを持つ5つのコンテナを持っています。 各コンテナには、現在のコンテナと接続されているコンテナを選択するためのボタンがあります。

これまでのところ、コンテナの選択は期待通りに機能します。 しかし、コンテナの選択を解除したいときは、istは機能しません。

スクリプトの計算部分は無視してください。

<script type="text/javascript"> 

$(document).ready(function(){ 

var pricepermod = ''; 
var priceperemp = ''; 
var priceperloc = ''; 
var priceperusr = ''; 
var priceperpor = ''; 
var price = ''; 

$("#price-calculator input").change(function(){ 
    $(this).pricecalc(); 
}); 

$.fn.pricecalc = function(){ 
    var pricepermod = 10; 
    var priceperemp = 1; 
    var priceperloc = 10; 
    var priceperusr = 10; 
    var priceperpor = 1; 
    // alert("funktion aufgerufen"); 
    var priceemp = $("#numemp").val() * priceperemp; 
    var priceloc = $("#numloc").val() * priceperloc; 
    var priceusr = $("#hruser").val() * priceperusr; 
    var pricepor = $("#empport").val() * priceperpor; 
    var pricemod = $("#nummod").val() * pricepermod; 
    price = pricemod + priceemp + priceloc + priceusr + pricepor; 
    $("#moncost").val(price); 
} 

$("#dpa.pricebox a.pricebutton").click(function() { 
    alert("DPA"); 
    pricepermod = 1; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("select"); 
    $("#dpa a.pricebutton").html("select"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 

$("#dpa.pricebox-selected > a.pricebutton").click(function() { 
    alert("DPA selected"); 
    pricepermod = 0; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#dms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("select"); 
    $("#dms a.pricebutton").html("select"); 
    $("#dpa a.pricebutton").html("select"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 


$("#dms.pricebox a.pricebutton").click(function() { 
    alert("DMS"); 
    pricepermod = 2; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#mms a.pricebutton").html("select"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 
$("#dms.pricebox-selected a.pricebutton").click(function() { 
    alert("DMS selected"); 
    pricepermod = 1; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("select"); 
    $("#dpa a.pricebutton").html("select"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 


$("#mms.pricebox a.pricebutton").click(function() { 
    alert("MMS"); 
    pricepermod = 3; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 
$("#mms.pricebox-selected a.pricebutton").click(function() { 
    alert("MMS selected"); 
    pricepermod = 2; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("select"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 

$("#tms.pricebox a.pricebutton").click(function() { 
    alert("TMS"); 
    pricepermod = 4; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#tms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#tms a.pricebutton").html("deselect"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 
$("#tms.pricebox-selected a.pricebutton").click(function() { 
    alert("TMS selected"); 
    pricepermod = 3; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#tms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#tms a.pricebutton").html("select"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 

$("#bms.pricebox a.pricebutton").click(function() { 
    alert("BMS"); 
    pricepermod = 5; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#tms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#bms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#tms a.pricebutton").html("deselect"); 
    $("#bms a.pricebutton").html("deselect"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 
$("#bms.pricebox-selected a.pricebutton").click(function() { 
    alert("BMS selected"); 
    pricepermod = 4; 
    $("#nummod").val(pricepermod); 
    $("#dpa").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#dms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#mms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#tms").removeClass("pricebox").addClass("pricebox-selected"); 
    $("#bms").removeClass("pricebox-selected").addClass("pricebox"); 
    $("#mms a.pricebutton").html("deselect"); 
    $("#dms a.pricebutton").html("deselect"); 
    $("#dpa a.pricebutton").html("deselect"); 
    $("#tms a.pricebutton").html("deselect"); 
    $("#bms a.pricebutton").html("select"); 
    $(this).pricecalc(); 
    event.preventDefault(); 
}); 

}）;

<body> 

    <div id="dpa" class="pricebox"> 
     <h2>DPA</h2> 
     <a href="#" class="pricebutton">auswählen</a> 
    </div> 
    <div id="dms" class="pricebox"> 
     <h2>DMS</h2> 
     <a href="#" class="pricebutton">auswählen</a> 
    </div> 
    <div id="mms" class="pricebox"> 
     <h2>MMS</h2> 
     <a href="#" class="pricebutton">auswählen</a> 
    </div> 
    <div id="tms" class="pricebox"> 
     <h2>TMS</h2> 
     <a href="#" class="pricebutton">auswählen</a> 
    </div> 
    <div id="bms" class="pricebox"> 
     <h2>BMS</h2> 
     <a href="#" class="pricebutton">auswählen</a> 
    </div> 


    <form id="price-calculator"> 
     <p>Anzahl Mitarbeiter <input type="text" name="numemp" id="numemp" class="form-control" value="0"></p> 
     <hr /> 
     <p>Anzahl Standorte <input type="text" name="numloc" id="numloc" class="form-control" value="0"></p> 
     <p>Anzahl HR-Anwender <input type="text" name="hruser" id="hruser" class="form-control" value="0"></p> 
     <p>Anzahl Mitarbeiterportale <input type="text" name="empport" id="empport" class="form-control" value="0"></p> 
     <hr /> 
     <p>gewählte Module <input type="text" name="nummod" id="nummod" class="form-control" value="0" /></p> 
     <p>Monatliches Nutzungsentgeld <input type="text" name="moncost" id="moncost" class="form-control" value="0" /> (&euro;/mtl.)</p> 
    </form> 

</body> 

Link to Fiddle

誰かがここに私を助けてくださいことはできますか？ は、私はすでに私はhereを見つけたさまざまなソリューションをしようとしていますが、何も:(

PSを動いていないようにみえ：。申し訳ありません悪いコードのために私はjQueryの専門家ではないです

Answer 1

あなたは.pricebox-selected CSSクラスonClickを切り替えることができます。
これは私が自分でコードの残りの部分を把握することができると思い、非常に汎用的な行動のほんの一例であるあなたのコメントへのフォローアップとして

EDIT：
内部ロジックがありますあなたには、より少ないコードでより一般的であることを示したかっただけです。私はコードを更新し、私は依存要素を扱う多くの方法のうちの1つを選択しました。ちょうどdata- *属性に追加し、onClickイベントで取得しました。
私が言ったように、これは多くの方法の一つです。

$(document).on('click','.pricebox a',function(e){ 
 
    var $currentBox = $(this).parent('.pricebox'); 
 
    var dependencies = $currentBox.attr('data-dependencies') || []; 
 
    var selectedClass = 'pricebox-selected'; 
 
    
 
    // remove all 
 
    $('.pricebox').removeClass(selectedClass); 
 
    
 
    // set current 
 
    $currentBox.addClass(selectedClass); 
 
    
 
    // set dependencies 
 
    $(dependencies.toString()).addClass(selectedClass); 
 
    console.clear(); 
 
    console.log(dependencies.toString()); 
 
    console.log($currentBox.attr('id')); 
 
});

.pricebox 
 
\t { 
 
\t \t width:100px; 
 
\t \t min-height:100px; 
 
\t \t display:inline-block; 
 
\t \t margin:0px 10px 10px 0px; 
 
\t \t padding:5px 10px; 
 
\t \t background-color:#ffffff; 
 
\t } 
 
\t .pricebox-selected 
 
\t { 
 
\t \t width:100px; 
 
\t \t min-height:100px; 
 
\t \t display:inline-block; 
 
\t \t margin:0px 10px 10px 0px; 
 
\t \t padding:5px 10px; 
 
\t \t background-color:#4169E1; 
 
\t } 
 
\t \t 
 
\t a.pricebutton 
 
\t { 
 
\t \t display:inline-block; 
 
\t \t padding:5px 10px; 
 
\t \t text-align:center; 
 
\t \t margin:10px auto 0 auto; 
 
\t \t text-decoration:none; 
 
\t \t border:1px solid #666; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="dpa" data-dependencies="" class="pricebox"> 
 
\t \t <h2>DPA</h2> 
 
\t \t <a href="#" class="pricebutton">select</a> 
 
\t </div> 
 
\t <div id="dms" data-dependencies="#dpa" class="pricebox"> 
 
\t \t <h2>DMS</h2> 
 
\t \t <a href="#" class="pricebutton">select</a> 
 
\t </div> 
 
\t <div id="mms" class="pricebox"> 
 
\t \t <h2>MMS</h2> 
 
\t \t <a href="#" class="pricebutton">select</a> 
 
\t </div> 
 
\t <div id="tms" data-dependencies="#dpa,#dms,#mms" class="pricebox"> 
 
\t \t <h2>TMS</h2> 
 
\t \t <a href="#" class="pricebutton">select</a> 
 
\t </div> 
 
\t <div id="bms" data-dependencies="#dpa,#dms,#mms,#tms" class="pricebox"> 
 
\t \t <h2>BMS</h2> 
 
\t \t <a href="#" class="pricebutton">select</a> 
 
\t </div>