文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >具有动态更改的onclick类的jQuery选择和取消选择元素

问具有动态更改的onclick类的jQuery选择和取消选择元素
EN

Stack Overflow用户
提问于 2017-06-26 13:27:35
回答 1查看 1K关注 0票数 2

我有5个不同id的容器。在每个容器中，我有一个按钮来选择当前和连接的容器。

到目前为止，集装箱的选择工作如出一辙。但是当我想取消选择一个容器列表时，它就不起作用了。

请忽略脚本的计算部分。

代码语言：javascript
复制
<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();
});

})；

代码语言：javascript
复制
<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>

链接到Fiddle

有人能帮帮我吗？我已经在尝试不同的解决方案，我找到了这里，但似乎什么都没有用：

PS:对不起，代码不好。我不是jQuery专家。

jquery
html
EN

回答 1

Stack Overflow用户

发布于 2017-06-26 13:42:11

您可以切换.pricebox-selected css类onClick。

这只是一个非常普通行为的例子，我认为您可以自己找出其余的代码。

编辑作为对您的评论的后续：

内部逻辑取决于您，我只是想说明，只要代码更少，它就可以更通用。我更新了代码，选择了处理依赖元素的多种方法之一，我只是将它们添加到一个data-*属性中，并在onClick事件中抓取它们。

就像我说的，这是很多人的一种方式。

​

代码语言：javascript
复制
$(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'));
});
代码语言：javascript
复制
.pricebox 
	{
		width:100px;
		min-height:100px;
		display:inline-block;
		margin:0px 10px 10px 0px;
		padding:5px 10px;
		background-color:#ffffff;
	}
	.pricebox-selected 
	{
		width:100px;
		min-height:100px;
		display:inline-block;
		margin:0px 10px 10px 0px;
		padding:5px 10px;
		background-color:#4169E1;
	}
		
	a.pricebutton 
	{
		display:inline-block;
		padding:5px 10px;
		text-align:center;
		margin:10px auto 0 auto;
		text-decoration:none;
		border:1px solid #666;
	}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dpa" data-dependencies="" class="pricebox">
		<h2>DPA</h2>
		<a href="#" class="pricebutton">select</a>
	</div>
	<div id="dms" data-dependencies="#dpa" class="pricebox">
		<h2>DMS</h2>
		<a href="#" class="pricebutton">select</a>
	</div>
	<div id="mms" class="pricebox">
		<h2>MMS</h2>
		<a href="#" class="pricebutton">select</a>
	</div>
	<div id="tms" data-dependencies="#dpa,#dms,#mms" class="pricebox">
		<h2>TMS</h2>
		<a href="#" class="pricebutton">select</a>
	</div>
	<div id="bms" data-dependencies="#dpa,#dms,#mms,#tms" class="pricebox">
		<h2>BMS</h2>
		<a href="#" class="pricebutton">select</a>
	</div>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44760890

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档