我需要在“edit.png”和“ok.png”之间切换。最初网页加载包含“edit.png”图像按钮的页面。就像下面的屏幕截图
我的要求是,一旦我单击edit.png,它应该保持为edit.png图像状态。我再次单击 edit.png,它应该更改为“ok.png”。那么我该怎么做,任何人都可以帮助我。
我尝试的是
$(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();
});
})
最佳答案
使用点击计数器,因此当您第二次单击该按钮时,它会显示“编辑”按钮并将计数器重置回 0。
当您单击“确定”按钮时,它会变回“编辑”按钮,并且由于您现在已经完成了第一次编辑,因此下次单击该按钮时,它会立即更改为“确定”。
$('.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();
});
关于javascript - 在 javascript 或 jquery 中的图像之间切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41660573/