javascript - 在特定的 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 上。

我找不到正确的方法来识别正确的 div，如果你在类 like-button1 中单击 div 中的 like 显示文本消息并提交该 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 的内容