关于两个jQuery(js)特效冲突的bug的解决办法
转载 &发布时间：日 09:22:42 & 投稿：jingxian
下面小编就为大家带来一篇关于两个jQuery(js)特效冲突的bug的解决办法。小编觉得挺不错的，现在就分享 给大家，也给大家做个参考。一起跟随小编过来看看吧
使用jquery，json做一个资源下载的应用，其中用到paginate.js和JSON数据的分页效果，以及jquery.DOMWindow.js的弹窗效果。
但是出现以下bug:
单击“上/下一页，首/末页”后，弹窗事件失效；
Analysis：
对于这个Bug，在paginate.js中设计的上/下一页，首/末页按钮属性是设置了href=”javascript:(void)”，google到关于这个属性的解释：
“javascript:void(0); in a link is usually a placeholderfor an onclick action that is done by clicking the link.”
在写 AJAX 的时候很常应用到类似的语法，好处是连结的样式还会存在，然则不会导向任何处所，改为执行 onclick 事务中的 function。在我们在做页面无刷新时用的比较多，一般是Ajax的使用上。
所以这个bug的原因可以理解为每次单击此按钮后，就链接到void，而让加载DOMWindow的js函数失效了。
所以可以通过把void改成页面中加载DOMWindow的js函数来解决这个bug。
Solution：
把每个翻页按钮中链接的javascript:(void)改成加载DOMWindow的js函数。即：javascript:DOMWindow()，这样在每一次翻页的过程中都会有加载到DOMWindow的js函数。
类似的这种技巧在协调多个javascript/jquery事件的情况下也常常用到。
以上这篇关于两个jQuery(js)特效冲突的bug的解决办法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具16:55 提问
JS里定时器发生冲突怎么结局?谢谢了
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
#A{height:120 width:1000 background:# position: left:0; top:0; margin: margin-top:50}
#B{height:100 width:100 background: position: left:0; top:20}
input{width:50 height:40 margin-right:20}
.ma{width:400 margin: margin-top:50}
&div id="A"&
&div id="B" style="left:0"&&/div&
&div class="ma"&
&input value="到达0"
type="button" onclick="show(0)"/&
&input value="到达300" type="button" onclick="show(1)"/&
&input value="到达600" type="button" onclick="show(2)"/&
&input value="到达900" type="button" onclick="show(3)"/&
var tt=document.getElementById('B').style.
var timer=
function right(jc){
tt=parseInt(tt)+30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
document.getElementById('B').style.left=tt+'px';
function left(jc){
tt=parseInt(tt)-30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
document.getElementById('B').style.left=tt+'px';
function show(jc){
if(parseInt(tt)&(jc*300)){
timer=window.setInterval(function (){right(jc)},30);
}else if(parseInt(tt)&(jc*300)) {
timer = window.setInterval(function () {left(jc)}, 30);
点击"到达900",定时器开始运行,盒子B慢慢的向右滑,在这个定时器还没结束的时候
点击其他的按钮,这样就冲突了,
怎样才能让定时器运行的时候,点击其他的定时器它不受影响
按赞数排序
我这代码实在是传不上去，不太会用。html部分被屏蔽掉了。html部分改动的内容是为每个button添加一个class=“button”
启动定时器的时候禁用按钮，或者加上一个全局变量，定时器在执行的时候通过它判断下是否允许执行。
启动定时器的时候，disbaled其他按钮
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力！
&!DOCTYPE html&
#A{height:120 width:1000 background:# position: left:0; top:0; margin: margin-top:50}
#B{height:100 width:100 background: position: left:0; top:20}
input{width:50 height:40 margin-right:20}
.ma{width:400 margin: margin-top:50}
var tt=document.getElementById('B').style.
var timer=
function right(jc){
tt=parseInt(tt)+30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
enableBtn();
document.getElementById('B').style.left=tt+'px';
function left(jc){
tt=parseInt(tt)-30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
enableBtn();
document.getElementById('B').style.left=tt+'px';
function show(jc){
disableBtn();
if(parseInt(tt)&(jc*300)){
timer=window.setInterval(function (){right(jc)},30);
}else if(parseInt(tt)&(jc*300)) {
timer = window.setInterval(function () {left(jc)}, 30);
function disableBtn(){
var buttonArr = document.getElementsByClassName('button');
for(var i=0;i&buttonArr.i++){
buttonArr[i].setAttribute("disabled",true );
function enableBtn(){
var buttonArr = document.getElementsByClassName('button');
for(var i=0;i&buttonArr.i++){
buttonArr[i].removeAttribute("disabled");
拷贝过去用beyond compare 对比一下看看我都加了哪些内容。
思路就是在点击按钮的时候禁用所有按钮，在方块到达指定的位置后取消所有按钮的禁用，希望能帮助到你
&!DOCTYPE html&
#A{height:120 width:1000 background:# position: left:0; top:0; margin: margin-top:50}
#B{height:100 width:100 background: position: left:0; top:20}
input{width:50 height:40 margin-right:20}
.ma{width:400 margin: margin-top:50}
var tt=document.getElementById('B').style.
var timer=
function right(jc){
tt=parseInt(tt)+30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
enableBtn();
document.getElementById('B').style.left=tt+'px';
function left(jc){
tt=parseInt(tt)-30;
if(tt&=(jc*300)){
tt=(jc*300);
window.clearInterval(timer);
enableBtn();
document.getElementById('B').style.left=tt+'px';
function show(jc){
disableBtn();
if(parseInt(tt)&(jc*300)){
timer=window.setInterval(function (){right(jc)},30);
}else if(parseInt(tt)&(jc*300)) {
timer = window.setInterval(function () {left(jc)}, 30);
function disableBtn(){
var buttonArr = document.getElementsByClassName('button');
for(var i=0;i&buttonArr.i++){
buttonArr[i].setAttribute("disabled",true );
function enableBtn(){
var buttonArr = document.getElementsByClassName('button');
for(var i=0;i&buttonArr.i++){
buttonArr[i].removeAttribute("disabled");
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐&求助&两个js代码冲突了，怎样解决？【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：161,797贴子：
&求助&两个js代码冲突了，怎样解决？收藏
-----------------------------------------01------------------------------------------------------------ function myEvent(obj,ev,fn){ if(obj.attachEvent){
obj.attachEvent(*on*+ev,fn); }else{
obj.addEventListener(ev,fn,false); }}myEvent(window,*load*,function(){ var oRTT=document.getElementById(*totop*); var pH=document.documentElement.clientH var timer= var scrollT window.onscroll=function(){
scrollTop=document.documentElement.scrollTop||document.body.scrollT
if(scrollTop&=pH){
oRTT.style.display=*block*;
oRTT.style.display=*none*;
return scrollT }; oRTT.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
var now=scrollT
var speed=(0-now)/10;
speed=speed&0?Math.ceil(speed):Math.floor(speed);
if(scrollTop==0){
clearInterval(timer);
document.documentElement.scrollTop=scrollTop+
document.body.scrollTop=scrollTop+
}, 30); }});-------------------------------------------------------------------------------------------------------------------------------------------------------------02---------------------------------------------------- var mt = 0;
window.onload = function () {
var mydiv = document.getElementById(&left_nav&);
var mt = mydiv.offsetTop+170;
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollT
if (t & mt) {
mydiv.style.position = &fixed&;
mydiv.style.marginLeft = &-140px&;
mydiv.style.marginTop = &0&;
mydiv.style.position = &static&;
mydiv.style.marginTop = &-354px&;
}--------------------------------------------------------------------------------------------------------
两段代码都没问题，我分别测试了都可以实现，但是放到一起就不行了，求大神给看看什么情况？该怎样解决？
有大神给看看不？
求大手给看一下啊
代码太长，没高兴看，不过你可以将两个代码进行封装，只将需要的部分用个全局变量开放出来就可以了例如(function(){}open={out:out()}function secret(){}function out(){})()
这个，，，可能我说的太不明了了，我重说一遍比如function a(){alert(&a&);b=0;}function a(){alert(&b&);b=1}这里有重名的函数，而你又不想修改，怎么办呢？看(function(){function a(){//第一个函数}})()(function(){function a(){//第二个函数}})这样既达到了目的，又不会因为重名而导致错误，当然，如果你的代码中有重名的函数的话。如果还不能解决问题，额，刚我还是看了下代码，感觉没问题，(我会直接告诉你我能力有限，找不到错误么？明显不会么。。。)
重名了～要么改名～要么改名～
有两个window.onload = function (){}
有两个window.onload = function (){},第一个window.onload = function (){}被覆盖
把第二个onload的函数放到第一个里面去就可以了。比如给第二个函数起个名字叫aaa,var aaa = function(){},然后在第一个函数里执行下aaa。就可以把两个onload变成一个。当然也可以把window.onload换成jq的$(document).ready();这个也不会冲突了
就这个层主我觉得还靠谱点，我会去试试的！
就是点击下面的然后跑到上面
点击上面的×，然后没了
登录百度帐号laravle和vue.js中解析冲突，也就是{{}}冲突，在不使用@{{}}的前提下（因为使用后就不解析了），这个问题该怎么解决？
本文章首发在
附加内容, 使用此功能的话, 会给所有参加过讨论的人发送提醒.
我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用 和 API 开发相关的进阶知识。
@leo那么链接里这样写/..../@{{id}}不对啊
{{ '{{ arg }}' }}
一直用 @{{ }}，没有遇到过问题
vue 应该不支持你这种写法了吧，用 :href="'/xxx/' + id"，如果还没明白就去补习 vue 知识
@leo好的，已经用v-on:click解决了
一直用 @{{ }}，没有遇到过问题
你的方法用了之后{{message}}就不解析了，直接输出了{{message}}而不是我想要的hello world。所以我是需要它解析的，你懂？
你的方法用来之后报错Parse error: syntax error, unexpected '}', expecting ',' or ')' (View: ，所以并不适用
当然懂，我用Laravel+Vue写了不下5个项目，都是这么做的
&tr v-for="item in services"&
&td&@{{ item.id }}&/td&
&td&@{{ item.name }}&/td&
&td&@{{{ displayHosts(item.hosts) }}}&/td&
&td&@{{{ bool2icon(item.enabled) }}}&/td&
&td&@{{{ bool2icon(item.allow_proxy) }}}&/td&
&td&@{{ item.created_at }}&/td&
&a href="javascript:void(0)" @click="edit(item)"&{{ trans('admin.edit') }}&/a&
{{message}}
你好，我看了你的代码，表示很6，我的问题是小白问题，麻烦你帮我看看哪里错了
html中的代码是
![Uploading file...]()
报错是Use of undefined constant message - assumed 'message' (View: E:\phpStudy\170220\WWW\resources\views\admin\login.blade.php)
我只是直接引入了vue.js，然后在script标签中输入点东西，在div标签中输出{{message}}就报错了
所以你需要 @{{ message }}，另外你这个代码执行不正常是因为js先执行，然后才渲染的dom，你把script移到body底部就正常了。
建议你打好前端的基础之后再来搞vue
我以前用jQuery做项目的时候，经常把js文件放在head里面，导致我的思路僵化，忘了head和body的不同位置会造成解析顺序不同，谢谢你的提醒！另外我想学习vue.js除了手册还有别的学习方法吗？望不吝赐教
多写代码，多看别人的代码
暂无评论~~
请注意单词拼写，以及中英文排版，
支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里
支持表情，使用方法请见 ，可用的 Emoji 请见 :metal: :point_right:
:star: :sparkles:
上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
发布框支持本地存储功能，会在内容变更时保存，「提交」按钮点击时清空Powered by WordPress | Theme by
Copyright (C)
All rights reserved. 蜀ICP备号.}