遍历未知数量的跨度 - JavaScript MVC

时间:2015-05-22 19:52:41

标签: javascript c# html asp.net-mvc

我有这些功能:

$(".Read-Showing-Comment-Cancel").live('click', function (e) {
  var guid = $(this).data("guid");
  e.preventDefault();

  var f = $('#comments-form-' + guid).slideUp();
  $('comments-text-' + guid).empty();
  $('comments-text-' + guid).value = "";
  $(this).find('.comments-form-' + guid).hide();
  $('comments-sendlink-' + guid).show();
});

$('.showComments').unbind('click').click(function (event) {
  $('.ListingDisplayOptions').hide();

  $(this).find('.comments-form-' + showGuid).show();

  var showGuid = $(this).attr('rel');
  loadShowingsComments(showGuid);
  $(this).attr('id', 'comments-sendlink-' + showGuid);

  event.preventDefault();
});

function loadShowingsComments(guid) {
  var commentTextArea = "#comments-form-" + guid;
  var commentDisplay = ".spanComments" + guid;
  var curComment = $(commentDisplay).text();
  var element = "#comments-form-" + guid;
  $(element).slideDown();
}

<script>
  function showComments() {
    var comments = document.querySelectorAll(".spanComments");
    for (var i = 0; i < comments.length; i++) {
      comments[i].innerHTML = "This is comment #" + i;
    }
  }
</script>

<a href="#" rel="@currentShowing.ShowingGUID" class="showComments noprint" id="comments-sendlink">View Comments</a>

这些函数应该从我的控制器中获取信息(它已正确连接。我已经逐步完成了它并填充了正确的信息)并将它们放在我的范围内:

<tr class="p_la" id="comments-form-@currentShowing.ShowingGUID" style="display:none;">
  <td colspan="4" style="border-right:5px solid #DDDDDD;">
    <form action="" method="post">
      <span class="spanComments" cols="100" rows="5">@string.Format("{0} / {1}", @currentShowing.Comments.DateAdded, @currentShowing.Comments.CommentsValue)</span>
      <br />
      <a href="#" class="button red Read-Showing-Comment-Cancel" data-guid="@currentShowing.ShowingGUID" rel="@currentShowing.ShowingGUID" id="comments-cancel-@currentShowing.ShowingGUID">Close</a>
    </form>
  </td>
</tr>

不幸的是,当我点击我的超链接时,它只会用第一个跨度的信息填充第一个跨度。适用于第一个跨度,但是当您单击第二个,第三个,第四个等项目中的超链接时,它们将仅打开第一个跨度和第一个跨度的信息。

代码应该使用自己的信息填充每个连续的span

1 个答案:

答案 0 :(得分:0)

我的JQuery没了。它需要改变它:

$(".Read-Showing-Comment-Cancel").live('click', function (e) {
  var guid = $(this).data("guid");
  e.preventDefault();

  var f = $('#comments-form-' + guid).slideUp();
  $('comments-text-' + guid).empty();
  $('comments-text-' + guid).value = "";
  $(this).parent("form").parent("td").parent("tr").hide();
  $('comments-sendlink-' + guid).show();
});

$('.showComments').unbind('click').click(function (event) {
  $('.ListingDisplayOptions').hide();
  var showGuid = $(this).attr('rel');
  $(this).parent("td").parent("tr").next('#comments-form-' + showGuid).show();
  $(this).attr('id', 'comments-sendlink-' + showGuid);

  event.preventDefault();
});