我有一个复选框(有点开关按钮)来打开/关闭功能。当我打开它时,功能应该工作,当我关闭它时,该功能不起作用。
现在的问题是当我打开开关,运行功能并将其关闭,该功能仍然有效,并没有停止。当开关关闭时,我需要停止工作。我也提出了fiddle问题。
HTML结构:
{
"data": [
{
"source" : <source_url1>,
"created_time" : <created_time1>,
"id" : <photo_id1>
},
{
"source" : <source_url2>,
"created_time" : <created_time2>,
"id" : <photo_id2>
}
]
}
JS:
<label for="onoffswitch">Switch: </label>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="mathswitch">
<br><br>
<textarea name="question1" id="question1" class="question_aptitude maths_editor"></textarea>
<br><br>
<div id="result"></div>
我已经开始搜索停止某个函数,并且大多数人都说使用了var isMaths=0;
$(function(){
$("#mathswitch").on('click', function(e){
chk= $("#mathswitch:checked").length;
if (chk>0)
{
isMaths=1;
}
else
{
isMaths=0;
}
e.stopImmediatePropagation();
})
$(".maths_editor").focus(function(){
store_id= $(this).prop('id');
console.log("chk :" + chk);
if (isMaths=='1')
{
myfunction();
}
else
{
$('#'+store_id).on('keyup', function (e){
var key = e.keyCode;
if (key == 77 && e.altKey)
{
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey)
{
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
})
}
})
})
function myfunction() {
$("#result").text("Maths is ON!");
console.log("working!");
$('#'+store_id).on('keyup', function (e){
var key = e.keyCode;
if (key == 77 && e.altKey)
{
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey)
{
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
})
}
,但这似乎不适用于我的情况。
答案 0 :(得分:2)
主要问题是,每当编辑器关注或myFunction运行时,您都在添加一个keyup事件,并且您还尝试在无法记录的范围内记录chk变量。我的修改改变了你想要“打开或关闭功能”的核心方面,但我觉得它可能适用于你需要的东西。如果您需要我解释任何事情,请随时发表评论!
以下是代码:
var isMaths = false;
$(function() {
$("#mathswitch").on('click', function(e) {
isMaths = $("#mathswitch").prop('checked');
e.stopImmediatePropagation();
})
$('.maths_editor').on('keyup', myfunction);
})
function myfunction(e) {
var key = e.keyCode;
if (isMaths) {
$("#result").text("Maths is ON!");
console.log("working!");
// Here is where you would call the function that's in an
// external file as you said in the comments on your question.
externalFileFunctionCall();
if (key == 77 && e.altKey) {
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey) {
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
} else {
$("#result").text("Maths is OFF!");
if (key == 77 && e.altKey) {
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey) {
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
}
}
答案 1 :(得分:1)
您可以使用jQuery .off()删除keyup事件处理程序,并根据复选框在焦点上声明一个新的处理程序。 See the documentation
$(function(){
$(".maths_editor").focus(function(){
$(this).off("keyup");
store_id= $(this).prop('id');
if ($("#mathswitch").is(":checked"))
{
myfunction();
}
else
{
$('#'+store_id).on('keyup', function (e){
var key = e.keyCode;
if (key == 77 && e.altKey)
{
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey)
{
alert("Maths is turned OFF");
e.stopImmediatePropagation();
return;
}
});
}
});
});
function myfunction() {
$('#'+store_id).on('keyup', function (e){
var key = e.keyCode;
if (key == 77 && e.altKey)
{
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
if (key == 90 && e.altKey)
{
alert("Maths is turned ON");
e.stopImmediatePropagation();
return;
}
});
}
.case{
width: 40%;
float: right;
border: 1px solid;
padding: 0.5em;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="case">
<h3>
Cases
</h3>
Please use CONSOLE to see values<br><br>
Case1: Initially without checking the checkbox and typing in the textbox, Pressing Alt+M should give alert ""Maths is OFF" but its not doing so!!<br><br>
Case2: After going through Case1, now check the checkbox and press Alt+M in texbox. It works fine. Now uncheck the checkbox and type Alt+m again. I still get the alert "Maths is ON" whereas i'm expecting it not to work because IF statement is false now!
</div>
<label for="onoffswitch">Switch: </label>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="mathswitch">
<br><br>
<textarea name="question1" id="question1" class="question_aptitude maths_editor" wrap="hard"></textarea>
<br><br>
<div id="result">
</div>