在特定 div 类中单击时提交 Jquery 文本和表单

Question

我有一个 php foreach，它生成带有 .like-button1,2,3,4.. 类的 div 并生成更多表单 form1,2,3,4..。

目标是当用户点击“喜欢”时，div 会显示文本消息：

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

脚本工作正常，但.hover 函数不是我真正想要的，因为如果您单击like-button1 div 中的第一个like 并继续第二个div，则该文本消息会出现在第二个div .

如果您单击带有like-button1 类的 div 内的类似内容并在该 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

您可以这样做，而不是使用独特的类： 向 div 添加一个名为 data-target="" 的新属性，其中包含要提交的表单的 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 的代码