[英]Toggle between images in javascript or jquery
I need to toggle between "edit.png" and "ok.png" . 我需要在“ edit.png”和“ ok.png”之间切换。 Initially web page loads the page contains "edit.png" image buttons.
最初,网页加载页面包含“ edit.png”图像按钮。 Like in the screen shot below
就像下面的屏幕截图一样
My requirement is, once i click on the edit.png it should be remains as edit.png image state. 我的要求是,一旦我单击edit.png,它应该保持为edit.png图像状态。 And once again i click on the edit.png it should changed to "ok.png".
然后再次单击edit.png,它应该更改为“ ok.png”。 So how can i do this anyone help me.
所以任何人我该怎么做。
What i tried is 我试过的是
$(function(){
$('.edit').on('click',function(){
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
})
$('#projectsTable').Tabledit({ url: '#', deleteButton: false, buttons: { edit: { class: 'btn btn-primary secodary', html: '<img src="/concrete5/application/images/animated/btn_edit.png" class="edit" /><img src="/concrete5/application/images/animated/btn_ok.png" class="ok" style="display:none" />', action: 'edit' } }, columns: { identifier: [1, 'Projects'], hideIdentifier: true, editable: [[1, 'Projects'], [2, 'Subprojects'],[8, 'Project Status', '{"1": "Open", "2": "Closed"}']] }, onDraw: function() { console.log('onDraw()'); }, onSuccess: function(data, textStatus, jqXHR) { console.log('onSuccess(data, textStatus, jqXHR)'); console.log(data); console.log(textStatus); console.log(jqXHR); }, onFail: function(jqXHR, textStatus, errorThrown) { console.log('onFail(jqXHR, textStatus, errorThrown)'); console.log(jqXHR); console.log(textStatus); console.log(errorThrown); }, onAlways: function() { console.log('onAlways()'); }, onAjax: function(action, serialize) { console.log('onAjax(action, serialize)'); console.log(action); console.log(serialize); } }); $(function(){ $('.edit').on('click',function(){ $(this).toggle(); //show the ok button which is just next to the edit button $(this).next(".ok").toggle(); }); $('.ok').on('click',function(){ $(this).toggle(); $(this).next(".edit").toggle(); }); })
Use a click counter, so when you click on the button the second time, it shows the "edit" button and resets the counter back to 0. 使用点击计数器,因此当您第二次单击按钮时,它将显示“编辑”按钮,并将计数器重置为0。
When you then click on the "ok" button it changes back to the "edit" button, and because you now have done the first edit, next time you click on the button it changes to "ok" right away. 然后,当您单击“确定”按钮时,它又变回“编辑”按钮,并且由于您已经完成了第一次编辑,因此下次单击该按钮时,它立即变为“确定”。
$('.edit').each(function() {
var clickCounter = 0, // Sets click counter to 0 - No clicks done yet
firstEdit = false; // Sets first edit to false
$(this).on('click', function() {
clickCounter++;
if( clickCounter == 2 || firstEdit == true ) {
$(this).toggle();
$(this).next('.ok').toggle();
clickCounter = 0; // Reset counter
firstEdit = true;
}
});
});
$('.ok').on('click', function() {
$(this).toggle();
$(this).prev('.edit').toggle();
});
$(window).ready(function(){
$('.edit').each(function(){
var counter=0;//add a counter to each edit button
this.on('click',function(){
counter++;//increase counter
console.log(counter);
if(counter===2){//if button clicked twice
$(this).toggle();
//show the ok button which is just next to the edit button
$(this).next(".ok").toggle();
counter=0;//reset counter
}
});
});
});
or taking pure ES6: 或采用纯ES6:
window.onload=function(){//when the page is loaded
var imgs=[...document.getElementsByClassName("edit")];//get all edit imgs
imgs.forEach(img=>{//loop trough images
var counter=0;//add a counter for each image
img.onclick=function(){
counter++;//onclick increase counter
if(conter===2){//if img was clicked twice
this.src="ok.png";//replace the img
counter=0;
}
}
});
};
You can use one class to control and change the state of your button: 您可以使用一个类来控制和更改按钮的状态:
$('.edit').on('click',function(){
if ($(this).hasClass('is-state1')) {
$(this).next(".ok").toggle();
$(this).toggle();
}
$(this).toggleClass('is-state1');
});
$('.ok').on('click',function(){
$(this).toggle();
$(this).next(".edit").toggle();
});
Also I'm thinking you are wrong in ok
button event as you want change your previous and not your next button: 另外我还认为您在
ok
按钮事件中错了,因为您想更改上一个按钮而不是下一个按钮:
$('.ok').on('click',function(){
$(this).toggle();
$(this).prev(".edit").toggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.