jQuery文本和表单在特定div类内单击时提交

Question

我有一个PHP foreach生成类.like-button1,2,3,4.. div，并生成更多形式form1,2,3,4..

目的是当用户单击“赞”时div显示文本消息：

“您喜欢：www.facebook.com/ferrari”

该脚本可以正常工作，但是.hover函数不是我真正想要的，因为如果您在like-button1 div中单击第一个，然后进入第二个div，则文本消息将显示在第二个div上。

我找不到正确的方法来标识正确的div，如果您在div中使用类like-button1 show text message单击div并在该div中提交表单，而不必避免将脚本悬停在另一个div上。

谢谢大家。

FB.Event.subscribe('edge.create', function (response) {

  $(".like-button1").hover(function() {                    
      $(".like-button1").text('Ti piace: ' + response);
      $("#form1").submit();
  });

  $(".like-button2").hover(function() {                    
      $(".like-button2").text('Ti piace: ' + response);
      $("#form2").submit();
  });

  $(".like-button3").hover(function() {                    
      $(".like-button3").text('Ti piace: ' + response);
      $("#form3").submit();
  });

});

Answer 1

而不是使用唯一的类，您可以执行以下操作：将一个名为data-target=""的新属性添加到divs中，该属性具有要提交的表单的ID。 即

< div class="like-button" data-target="form1" >< /div>

那么javascript将如下所示：

FB.Event.subscribe('edge.create', function (response) {
  var formId = $(this).attr('data-target');
  $(".like-button").text('');            
  $(this).text('Ti piace: ' + response);
  $("#"+formId).submit();

});

这将清除所有类.like-button中的文本，并将文本添加到被单击的文本中。 提交带有在data-target=""属性中传递的ID的表单。

这样编写代码也将缩短现在和将来编写的代码量，因为将来无疑会添加更多类似div的代码