我承认这个问题可能属于"可讨论"而非"可回答"类别.如果是的话,我会道歉,请将此问题标记出来.
问题:我主要使用jQuery和UI进行前端交互和AJAX.如果可能的话,我需要尽快帮助一个Dojo项目,并且想知道是否有人知道更多的文档是用jQuery进行交叉引用的.例如,如果你使用jQuery.UI作为标签,那么这就是Dojo中的等价物.如果你想选择一个具有特定ID的对象,你可以在jQuery中执行此操作,这在Dojo ...等等.
(试想想,这也许是一个网站,一个伟大的想法...一个jQuery与MooTools的主场迎战道场与Scriptaculous的主场迎战主场迎战的ExtJS等例子......)
我遇到的一个常见问题是混淆$(this)指的是什么.
我经常会尝试给它一些奇怪的风格:
$(this).css("border","10px solid red")
哪个有时有帮助.
然而,我对以下内容感到难过.我的问题可以通过两种方式回答:
1)在任何给定的情况下,是否有一种通用的方式来"看"$(this)所指的是什么？也许与萤火虫结合？
2)更具体地说,任何想法$(this)应该在下面的示例中引用什么？我假设它将是一个btnSave类的输入,但似乎不是:
$(ajaxContainer).find("input.btnSave").click(function(){
savePanel();
});
function savePanel() {
$(this).css("border","10px solid red");
};
我有一些看起来像这样的HTML:
<ul class="toggleList">
<li><input type="checkbox" name="toggleCbx1" id="toggleCbx1" /><label for="toggleCbx1">Item 1</label></li>
</ul>
我正在使用jquery将单击事件附加到LI,然后将修改某些类并选中或取消选中其中的复选框.
我附上了click事件:
$("ul.toggleList li").click(function(){toggleStuff($(this));})
如果我点击LI中的任何位置,这可以正常工作.但是,如果我单击LI中的LABEL,我的click事件将被调用两次.
这是为什么？我认为这与某种事件起泡有关,对吗？
因此,使用.triggerHandler的解决方案是什么？我已经对它做了一些阅读并查看了一些示例,但我不太了解设置它的正确语法.
附录:
Sam指出了一个我认为会导致解决方案的选项.这可能不是triggerHandler问题.
似乎正在发生的事情是(默认情况下？)点击LABEL会使点击事件冒泡.解决方案似乎是检查事件是否由标签触发,如果是,则覆盖该标签.
做一些测试:
[...].click(function(evt){
console.log(evt.target);
if ($(evt.target).not("label")) {
console.log("not label?");
doMyThing($(this));
}else{
console.log("is label?");
};
以上不起作用.无论我点击LABEL还是其他元素,它都认为它不是标签.
奇怪的是,扭转逻辑确实有效:
[...].click(function(evt){
console.log(evt.target);
if ($(evt.target).is("label")) {
console.log("is label?");
}else{
console.log("not label?");
doMyThing($(this));
};
知道那是什么吗？我会做更多测试......
最终附录:
哎呀!用户错误.我错误地认为'.not'与'.''相反.嗯,那不是真的..is进行比较并返回一个布尔值..not删除匹配的元素(因此返回对象).
所以,我猜一个人总是必须检查.is并在测试'not is'时使用else
我有这个javascript:
triggerAnimation(listItem,toggleToggleRadioListItem(listItem));
function triggerAnimation(listItem,passThruFunction){
listItem.find(".inlineLoading").show();
// pause and then call the toggle function
$("body").animate({opacity: 1}, 1000,
function(){
alert("a");
passThruFunction;
}
);
}
function toggleToggleRadioListItem(listItem) {
alert("b");
};
应该发生什么:
基于以上所述,我希望警报A出现在警报B之前,但事实并非如此.发生的事情是(看起来)一旦调用triggerAnimation()就会调用警报B. 这是为什么？我怎样才能实现这种行为？
HTML
<select multiple="multiple" id="myID" name="myName">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
</select>
jQuery的:
$('select')
.change(function(){
alert("Change Event Triggered On:" + $(this).attr("value"));
})
那就是有效的.如果单击多选中的项目,则会触发警报.
但是,当我通过jQuery从选择菜单中选择一个元素时,如下所示:
$('#myOtherSelector')
.click(function(){
var $matchingOption = [goes and selects the specific OPTION to toggle]
if ($matchingOption.attr("selected")){
$matchingOption.removeAttr("selected")
}else{
$matchingOption.attr("selected","selected");
}
})
该脚本的工作原理是它更改SELECTED属性并可视地更新选项列表,但是在该场景中不会触发onchange事件.
这是为什么？
我正在玩-webkit-mask-box-imagecss属性.
<div style="
background-color: red;
-webkit-mask-box-image: url('images/cards/set1.png');
"></div>
这非常有效.我最终得到了蒙版图像形状的红色元素.
唯一的问题是我需要大约25个不同的图像.我可以加载25个不同的蒙版图像,但如果我只加载一个图像然后使用它类似于CSS精灵,我重新定位或剪辑它会很棒.
但我想不出用掩码属性做到这一点的好方法.它可行吗？
我想出的一个解决方案是使用类似于此的标记:
<div style="
width: 100px;
height: 100px;
overflow: hidden;
position: relative;">
<div style="
background-color: red;
-webkit-mask-box-image: url('images/cards/set1.png');
position: absolute;
top: -400px
"></div>
</div>
我没有像使用精灵那样使用背景图像并将其定位,而是使用DIV并将其定位在用于裁剪它的父div中.我认为这是一个不错的选择,但是想知道是否有一个以webkit为中心的CSS属性已经设计好了.
我正在使用PhoneGap开发iOS应用程序.我遇到了一个烦人的问题,我的一些图像没有加载.我认为这是一个缓存问题我在交换图像.
我终于发现问题与我的图像高度有关.经过一系列的反复试验后,我发现高于7864px的图像无法加载到iPad模拟器或iPad本身.它将在Safari中正常加载.这不是文件大小限制,因为它们只有45k大小,我正在其他地方加载大小为700k的图像而没有问题.
有没有人碰到这个？我在移动Safari中找不到任何有关图像尺寸的文档限制.如果有限制,了解它们会很方便.
我正在处理一种情况,我需要将jQuery事件绑定到页面以处理通过JSF生成的UI更新.唉,JSF糟透了,它坚持在所有事情上点击事件,这会抢占我的任何jQuery工作.
感谢SO的优秀人员,我找到了解决方案:
将我的jQuery click事件与现有对象的onclick属性混合在一起
逻辑是:
onclick属性并将它们存储在变量中.eval在原来的onclick:eval(onclickValueVariable)这在我的所有虚拟onclick事件测试中都有用.
但是在那个实时的JSF页面上失败了.问题是所有的onclick都以'return false'结束,这导致了这个错误:
return not in function
例如:
<div class="uglyJSFcreatedTag" onclick="console.log('hey');return false">
而jQuery会解雇它:
var $jsfTag = $('.uglyJSFcreatedTag');
var cacheOnclick = $jsfTag.attr(onclick);
$jsfTag.removeAttr('onclick');
...bunch of logic here to decide if the inline onclick should fire and, if so...
eval(cacheOnclick)
问题是return false.看起来在射击eval时无法返回任何内容.
这有解决方案吗？我想我可以将值作为字符串并进行字符串解析以删除所有返回false,然后从脚本本身调用它.但这听起来有点混乱.有更优雅的解决方案吗？
如果没有,我应该在调用之前过滤掉哪些特定的JS语句eval？
已经提出了这个问题的变化,但答案都不同,有点过时,并且对我不起作用所以我希望这是jQuery中我改变的语法规则的问题.
方案HTML:
<div id="theDroppable">Droppable</div>
<div id="theDraggable">Draggable</div>
<div id="theTrigger">Click to trigger a drop</div>
jQuery:
$( "#theDroppable" )
.droppable({
drop: function( event, ui ) {
alert('dropped');
}
});
$( "#theDraggable" ).draggable({});
$( "#theTrigger" ).click(function(){$( "#theDroppable" ).trigger('drop')});
小提琴:http://jsfiddle.net/7Bewj/
上面创建了一个Droppable,一个Draggable和一个div,我想用它以某种方式触发与droppable上的drop事件相关联的函数.
拖动工作正常,将其拖动到droppable并释放触发警报.
问题是如何在不使用实际可拖动的情况下触发相同的进程...或者至少不使用掉在顶部的可拖动(例如通过单击第3个div)？
jquery triggers jquery-ui jquery-ui-draggable jquery-ui-droppable
我们需要布局大量的数据。一个简单的表可以很好地工作，但我们正在使其完全响应，因此对于简单的字段/值对，我们试图避免对表标记过于疯狂，以使回流更容易一些。
过去，我会首先使用定义列表：
<dl>
<dt>Label</dt>
<dd>Value</dd>
</dl>
但是……它们也有缺点……也就是说，屏幕阅读器等并不总是能识别此标记的语义值，因此经常不受欢迎。
在语义和可访问性（以及 HTML5）方面，是否有一组特定的 ARIA 属性可以使它变得更好？
如果是这样，我应该使用哪些？我在网上找到的示例通常用于 a) 标签/字段对或 b) 将 ARIA 标签用于不可见标签。两者都不适合这种情况。
这是我认为我们需要的：
<div class="datawrapper">
<div class="label" **some-ARIA-attribute-to-attach-this-to**="value1">Label</div>
<div class="value" id="value1">Value</div>
</div>
是否有专门为此设计的 ARIA 属性？ARIA 是否有更好的解决方案来使其易于访问？