Question

我需要在＆＃34; edit.png＆＃34;之间切换。和＆＃34; ok.png＆＃34; 。最初网页加载页面包含＆＃34; edit.png＆＃34;图像按钮。就像在

下方的屏幕截图中一样

我的要求是，一旦我点击edit.png，它应该保持为edit.png图像状态。再一次，我点击edit.png，它应该改为＆＃34; ok.png＆＃34;。那么我怎么能这样做才能帮助我。

我尝试的是

  $(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();     
   });
 })

＆＃13;

$('#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();     
	});
})

＆＃13;

Answer 1

使用点击计数器，因此当您第二次点击该按钮时，它会显示＆＃34;编辑＆＃34;按钮并将计数器重置为0。

当你点击＆＃34; ok＆＃34;按钮它会变回＆＃34;编辑＆＃34;按钮，因为您现在已经完成了第一次编辑，下次单击按钮时它会变为＆＃34; ok＆＃34;马上。

@Entity
public class Menu
{
    protected class ItemList extends AbstractList<Item>
    {
        protected ArrayList<Item> list;

        public ItemList()
        {
            super();
            list = new ArrayList<>();
        }

        public ItemList(Collection<? extends Item> c)
        {
            super();
            list = new ArrayList<>(c.size());
            addAll(c);
        }

        @Override
        public boolean add(Item item)
        {
            if(!Objects.equals(merchant, item.merchant))
            {
                throw new IllegalArgumentException();
                // or return false;
            }

            return list.add(item);
        }

        @Override
        public Item get(int index)
        {
            return list.get(index);
        }

        @Override
        public int size()
        {
            return list.size();
        }
    }

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", nullable = false)
    protected long id;

    @ManyToOne
    @JoinColumn(name = "merchant_id", nullable = false)
    protected Merchant merchant;

    @Column(name = "name", length = 45)
    protected String name;

    @ManyToMany
    @JoinTable(name = "MENU_ITEM",
        joinColumns = @JoinColumn(name = "menu_id"),
        inverseJoinColumns = @JoinColumn(name = "item_id"))
    protected List<Item> items = new ItemList();

    public List<Item> getItems()
    {
        return items;
    }

    public void setItems(List<Item> items)
    {
        this.items = new ItemList(items);
    }
}

see here

Answer 2

 $(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
         }
        });
     });
    });

或采用纯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;
          }
      }
  });
};

Answer 3

您可以使用一个班级来控制和更改按钮的状态：

$('.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();     
});

另外我认为您在ok按钮事件中出错了，因为您想要更改以前的按钮而不是下一个按钮：

$('.ok').on('click',function(){ 
   $(this).toggle();  
   $(this).prev(".edit").toggle();     
});

在javascript或jquery中切换图像

3 个答案: