$(document).ready(function () {
runBind();
function runBind() {
/**
* Deletes a task in the To Do list
*/
$('.destroy').on('click', function (e) {
var $currentListItem = $(this).closest('li');
var $currentListItemLabel = $currentListItem.find('label');
$('#main-content').trigger('heightChange');
$.ajax({
url: 'dashboard/deleteToDo',
type: 'post',
data: 'message=' + $currentListItemLabel.text()
}).success(function (data) {
$currentListItem.remove();
}).error(function () {
alert("Error deleting this item. This item was not deleted, please try again.");
})
});
/**
* Finish the to do task or unfinish it depending on the data attribute.
*/
$('.toggle').on('ifClicked', function (e) {
console.log("hallo");
var $currentListItemLabel = $(this).closest('li').find('label');
/*
* Do this or add css and remove JS dynamic css.
*/
if ($currentListItemLabel.attr('data') == 'done') {
$.ajax({
url: 'dashboard/finishToDo',
type: 'post',
data: 'message=' + $currentListItemLabel.text() + '&finish=' + false
}).success(function (data) {
console.log(data);
$currentListItemLabel.attr('data', '');
$currentListItemLabel.css('text-decoration', 'none');
}).error(function () {
alert("Error updating this item. This item was not updated, please try again.");
})
}
else {
$.ajax({
url: 'dashboard/finishToDo',
type: 'post',
data: 'message=' + $currentListItemLabel.text() + '&finish=' + true
}).success(function (data) {
console.log(data);
$currentListItemLabel.attr('data', 'done');
$currentListItemLabel.css('text-decoration', 'line-through');
}).error(function () {
alert("Error updating this item. This item was not updated, please try again.");
})
}
});
}
$todoList = $('#todo-list');
/**
* Add a new To Do task.
*/
$("#frm_toDo").submit(function (e) {
e.preventDefault();
var url = $(this).attr('action');
var method = $(this).attr('method');
var data = $(this).serialize();
$.ajax({
url: url,
type: method,
data: data
}).success(function (data) {
addItemToHTMLList();
$('#new-todo').val('');
}).error(function () {
alert("Error saving this task. This task has not been saved, please try again.");
});
});
/**
* Adds the task that has been created directly to the HTML page
*/
var addItemToHTMLList = function () {
$('.destroy').off('click');
$('.toggle').off('click');
var todos = "";
todos +=
"<li>" +
"<div class='view'>" +
"<div class='row'>" +
"<div class='col-xs-1'>" +
"<input class='toggle' type='checkbox'>" +
"</div>" +
"<div class='col-xs-10'>" +
"<label id='item'>" + " " + $('#new-todo').val() + "</label>" +
"</div>" +
"<div class='col-xs-1'>" +
"<a class='destroy'></a>" +
"</div>" +
"</div>" +
"</div>" +
"</li>" + $todoList.html();
$todoList.html(todos);
$todoList.find('input').iCheck({checkboxClass: 'icheckbox_flat-grey', radioClass: 'iradio_flat-grey'});
runBind();
$('#main').show();
}
});
同时执行两个功能。没有好处，因为它只是动作\ playnow \然后\停止\后立即。
我需要onClick来每隔一次点击执行该功能。
点击1：\ playnow \
点击2：\ stop \
点击3：\ playnow \
等
有没有一种简单的方法可以达到这个目的？
答案 0 :(得分：3)
定义一个保存当前状态的var：
var state = false;
function handleAction() {
if (state == false) {
// stuff for 'playnow' action
state = true;
return;
}
if (state == true) {
// stuff for 'stop' action
state = false;
return;
}
}
答案 1 :(得分：1)
是。你可以做点什么
var play=false,
button = document.getElementById('playbtn'),
audiotag = document.getElementById('audio');
button.addEventListener('click', function(){
if(play){
audiotag.pause()
play=true;
}else{
audiotag.play();
play=false;
}
})
要完成这项工作，你可以使用这样的HTML：
<div id="audioplayer">
<button id="playbtn">play</button>
<audio id="audiotag" src="path/to/audiofile"></audio>
</div>
所以你要像上面那样添加音频html并使用getElementById来获取javascript中的每个元素。之后，您附加一个事件侦听器来侦听click事件并调用处理程序，这是匿名函数。在该功能中，您可以直接在音频对象上使用本机播放和暂停方法，以便在播放时停止播放音频，然后在音频停止时再次播放。
您可以添加其他属性到音频标记，以便在页面加载后立即开始播放。单击该按钮时，play变量设置为true，因此它将在第一次单击时暂停，然后将其设置为false。随后的单击将再次播放并再次将变量设置为true，依此类推
答案 2 :(得分：0)
声明一个全局变量并根据传递的内容进行交换：
var switch = "playnow";
function handleAction(a) {
if a === switch {
alert(a);
}
else {
alert(a);
switch = a;
}
}
答案 3 :(得分：0)
请参阅此问题的answer。
让我们创建一个名为toggle的函数，让您指定每隔一次点击发生的操作
var toggle = function (a, b) {
var togg = false;
return function () {
// passes return value back to caller
return (togg = !togg) ? a() : b();
};
};
然后我们会像这样设置点击处理程序
button.addEventListener('click', toggle(function () {
//play now logic
}, function () {
// stop logic
}));
现在，您的点击处理程序会在每次点击时在第一个和第二个函数之间切换。
答案 4 :(得分：0)
Tyr为您解答如何解决问题。在这里，您将获得一些可以帮助您设计更好代码的注释。
如果您的网络上有一个大动画和一个按钮，那么您的代码就完全可以了，保持代码简单是一个好主意。但如果你有这样的东西
<button onclick="...">Animation A</button>
<button onclick="...">Animation B</button>
然后你需要更好的设计。如果将state全局变量插入到HandleAction中，则会破坏低耦合，HandleAction将绑定到您的单个事件，并且无法在其他地方重复使用。
最好问自己这个功能有什么作用？在第一种情况下，选择更好的名称很有用，比如 HandleIntroAnimation 。如果它处理（任何）动画，那么最好在参数中指定它。
function HandleAnimation(animation, play) {
if(play) ... // playnow
else ... // stop
}
这确实就是这个名字所说的。要在代码中使用它，请编写代理函数：
<script>
// If you enhance your web, you only alter this code.
// HandleAnimation stays the same, regardless the changes.
var animationStatus = {}
function ToggleAnimation(animation) {
animationStatus[animation] = !animationStatus[animation];
HandleAnimation(animation, animationStatus[animation]);
}
</script>
<button onclick="toggleAnimation(this)">Animation A</button>
<button onclick="toggleAnimation(this)">Animation B</button>
最后，你可以完全解耦HTML和JS：
<强> animations.js
window.addEventListener("load",function() {
// HandleAnimation and ToggleAnimation definitions goes here
// to avoid collisions in global namespace
var anims = document.getElementsByClassName("animation");
for(var i=0; i<anims.length; ++i) anims[i].addEventListener("click",function() {
ToggleAnimation(anims[i]);
});
});
你的HTML
<script src="animations.js"></script>
<button class="animation">Animation A</button>
<button class="animation">Animation B</button>
你有动画框架：每个带有动画类的元素都会神奇地切换它的动画。在这种情况下，动画数据可以在data- *属性，数据动画中提供。
然后你可以在github上将它作为开源提供，或者使用别人的开放代码来填充代码中缺少的部分，你懒得自己编写代码。由于许多车轮已经发明，因此您需要编码的唯一内容通常是代理功能。这就是编码员如何节省彼此的时间。快乐的编码。