你好,谢谢你的时间,
我在使用$(" .Common")时出现轻微问题。单击(function(){无论是否单击的元素包含.Common类,都会触发,我想要它如果单击的元素具有.Common,则仅应用类.chosen。我的代码:
$(document).ready(function(){
$(".Common").click(function() {
$(".Common").removeClass(".Common");
$(this).addClass('chosen');
});
$(".Common").click(function(){
var classes = $(this).attr("data");
$( ".highlighted" ).removeClass( "highlighted" );
$( ".Common" ).removeClass( "Common" );
$( "."+classes ).addClass( "highlighted" );
$( "."+classes ).addClass( "Common" );
});
});
和HTML
<div data="WHAT" class="Common" >What</div>
<div data="NAME" class="Common YOUR" >Name</div>
<div data="ARE" class="Common WHAT" >Are</div>
<div data="IS" class="Common WHAT" >Is</div>
<div data="SKILLS" class="Common YOUR" >Skills</div>
<div data="YOUR" class="Common ARE IS DO" >Your</div>
<div data="LIKE" class="Common hdo YOUR" >Like</div>
<div data="PRESSURE" class="Common WHAT" >Pressure</div>
<div data="EXPERIENCE" class="Common YOUR" >Experience</div>
<div data="DIFFICULTIES" class="Common YOUR" >Difficulties</div>
<div data="DO" class="Common WHAT" >Do</div>
<div data="MOTIVATION" class="Common YOUR" >Motivation</div>
<div data="LIVE" class="Common YOUR" >Live</div>
<div data="GOALS" class="Common WHAT" >Goals</div>
<div data="FEAR" class="Common hdo YOUR" >Fear</div>
<div data="LOVE" class="Common hdo YOUR" >Love</div>
<div data="WEAKNESS" class="Common YOUR" >Weakness</div>
<div data="FUTURE" class="Common YOUR" >Future</div>
<div data="SKILLS" class="Common YOUR HAVE" >Skills</div>
<div data="GIVE" class="Common YOUR" >Give</div>
<div data="HELP" class="Common YOUR" >Help</div>
<div data="PASSION" class="Common YOUR" >Passion</div>
<div data="STRENGTHS" class="Common YOUR" >Strengths</div>
<div data="CREATE" class="Common hdo YOUR" >Create</div>
<div data="AGE" class="Common YOUR" >Age</div>
<div data="HAVE" class="Common WHAT" >Have</div>
<div class="finish SKILLS NAME AGE">?</div>
和CSS
.chosen{
background-color:blue;
}
.highlighted{
background-color:yellow;
}
如果有人能告诉我问题是什么,我会很高兴。这是问题的一个小提琴:http://jsfiddle.net/au8o0Lz6/15/
提前多多感谢!
答案 0 :(得分:2)
在运行$
函数时,将该函数绑定为作为该类成员的每个元素的单击事件处理程序。
如果您想在点击时测试点击的元素是否是类的成员,那么您有两个选择:
$(this).is(".Common");
)$(document).on('click', '.Common', function(event) { /* ... */ });
答案 1 :(得分:1)
我在使用$(&#34; .Common&#34;)时出现轻微问题。单击(function(){无论是否单击的元素包含.Common类,都会触发,我想要它如果单击的元素具有.Common,则仅应用类.chosen。
问题在于,您的代码正在将处理程序连接到具有类class EmployeeOrder
{
public int Id {get; set;}
public int OrderId {get; set;}
public int Number {get; set;
}
...
var orders = oc.Translate<EmployeeOrder>(reader).ToLookup(x => x.Id);
employee.Orders = orders[employee.Id].Select(x => new Order
{
OrderId = x.OrderId,
Number = x.Number
}.ToList();
的元素,直到运行该代码时。如果稍后删除该类,则它对事件处理程序是否附加到元素没有影响。
如果您希望处理程序是否根据元素在发生单击时是否具有类而触发,则可以使用事件委派来执行此操作:将事件挂钩到容器元素上全部在(如果你愿意,它可以是Common
)告诉jQuery你只对该事件感兴趣,如果该元素具有类document
:
Common
您引用的代码还让您多次连接处理程序,一次在$(document).on("click", ".Common", function() {
// Code here
});
回调中,一次不在ready
回调中。 (它似乎最后还有一个悬空ready
,这应该会引发语法错误。)
最后,});
不是有效的属性名称。自定义属性必须以data
开头,因此可能data-
代表您正在做的事情。
查看你的代码,你可能想要这样的东西:
data-class
如果您控制脚本标记的位置,请将其放在文档的结束的标记中。否则,请将其包装在$(document).on("click", ".Common", function() {
var selector = "." + $(this).attr("data-class");
$(".highlighted").removeClass("highlighted");
$(".Common").removeClass("Common");
$(selector).addClass("highlighted");
$(selector).addClass("Common");
});
回调中。
示例:
ready
&#13;
$(document).on("click", ".Common", function() {
var selector = "." + $(this).attr("data-class");
$(".highlighted").removeClass("highlighted");
$(".Common").removeClass("Common");
$(selector).addClass("highlighted");
$(selector).addClass("Common");
});
&#13;
.chosen {
background-color: blue;
}
.highlighted {
background-color: yellow;
}
&#13;
......但也可能还有其他事情发生。以上至少改变了所描述的类。
答案 2 :(得分:1)
如果您需要,请尝试以下代码,
$(document).ready(function() {
$(".Common").click(function() {
$(".Common").removeClass(".Common");
$(this).addClass('chosen');
});
$(".Common").on('click', function() {
if ($(this).hasClass('Common')) {
var classes = $(this).attr("data");
//$( ".Common" ).removeClass( "Common" );
$(this).addClass("chosen");
//$( "."+classes ).addClass( "Common" );
}
});
});
&#13;
.chosen {
background-color: blue;
}
.highlighted {
background-color: yellow;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div data="WHAT" class="Common">What</div>
<div data="NAME" class="Common YOUR">Name</div>
<div data="ARE" class="Common WHAT">Are</div>
<div data="IS" class="Common WHAT">Is</div>
<div data="SKILLS" class="Common YOUR">Skills</div>
<div data="YOUR" class="Common ARE IS DO">Your</div>
<div data="LIKE" class="Common hdo YOUR">Like</div>
<div data="PRESSURE" class="Common WHAT">Pressure</div>
<div data="EXPERIENCE" class="Common YOUR">Experience</div>
<div data="DIFFICULTIES" class="Common YOUR">Difficulties</div>
<div data="DO" class="Common WHAT">Do</div>
<div data="MOTIVATION" class="Common YOUR">Motivation</div>
<div data="LIVE" class="Common YOUR">Live</div>
<div data="GOALS" class="Common WHAT">Goals</div>
<div data="FEAR" class="Common hdo YOUR">Fear</div>
<div data="LOVE" class="Common hdo YOUR">Love</div>
<div data="WEAKNESS" class="Common YOUR">Weakness</div>
<div data="FUTURE" class="Common YOUR">Future</div>
<div data="SKILLS" class="Common YOUR HAVE">Skills</div>
<div data="GIVE" class="Common YOUR">Give</div>
<div data="HELP" class="Common YOUR">Help</div>
<div data="PASSION" class="Common YOUR">Passion</div>
<div data="STRENGTHS" class="Common YOUR">Strengths</div>
<div data="CREATE" class="Common hdo YOUR">Create</div>
<div data="AGE" class="Common YOUR">Age</div>
<div data="HAVE" class="Common WHAT">Have</div>
<div class="finish SKILLS NAME AGE">?</div>
</div>
&#13;