Question

我有一个从程序生成的表，列出了数据库中的信息。你可以在这里看到它：

http://www.homeducate.me/cgi-bin/browseTutors.cgi?Lui=en&countryCode=MO

对于一篇文章，如果它很长，我会列出缩短版本的文本。现在，当用户点击该行以展开下面的其他行时，我想将其切换到更长的版本。

我的表有一组重复的部分，如下所示：

<tr class="header">
 //some stuff
<script>
  var approachTxt1 = "Shortened version of the text...";
  var approachFullTxt1 = "Full length version of the text to be displayed.";
</script>

<td><img src="an_image.png"><span id="approach1">Shortened version of the text...</span><img src="another_image.png"></td>

//some more stuff
</tr>
<tr>Some more rows of stuff</tr>

然后我使用以下脚本（1）最初折叠每个标题行下的所有行，（2）切换它们以便在单击标题行时再次显示（3）如果用户单击，则重定向到URL未隐藏的行和（4）在表格上方时将指针更改为鼠标。一切都很好。

<script>

    $('#listTutors .header').each(function () {
        $(this).nextUntil('tr.header').toggle();
    });

   $('.header').click(function () {
    var $this = $(this);
      $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
      });

    });

    $("tr:not('.header')").click(function () {
      top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
    });

    $('html,table').css('cursor','pointer');

</script>

现在我想做的是当用户点击展开该部分时将文本的缩短版本切换为全文，然后当用户再次单击以隐藏该部分时再将其切换回缩短的表单。我一直在努力：

     $(this).next('span').html($(this).next('span').html() == approachTxt1 ? approachFullTxt1 : approachTxt1);

但我得到＆＃34;未定义不是一个功能＆＃34;和＃34;意外的字符串＆＃34;错误。它显然没有在当前标题之后获得跨度。

另外，我还在努力思考如何为每组表行启动此更改（例如，根据用户选择的标题行切换相应的字符串）。我已经在这个问题上摸不着头脑了:(并且非常感谢任何指导。

任何帮助非常感谢。欢呼声。

Answer 1

好的，终于弄明白了怎么做。在这里发布，以防将来可能帮助其他人......

首先，我为表格的每个部分设置了一个唯一的ID：

<tr class="header" id="$nnn">

其中$ nnn是从我的Perl程序驱动的，只是1,2,3等。

然后，对于表格的每个部分，我将短文本字符串和长文本字符串放入数组的元素中：

<script>
   approachTxt[$nnn] = "short version of the text";
   approachFullTxt[$nnn] = "long version of the text which will be switched in and out";
</script>

然后我的脚本变成：

<script>

    $('#listTutors .header').each(function () {
        $(this).nextUntil('tr.header').toggle();
    });

    $('.header').click(function () {
    var $this = $(this);
      $(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
      });

     $('#span' + this.id).html($('#span' + this.id).html() == approachTxt[this.id] ? approachFullTxt[this.id] : approachTxt[this.id]);

    });

    $("tr:not('.header')").click(function () {
      top.window.location.href="http://www.homeducate.me/cgi-bin/createAccountForm.cgi?Lui=en";
    });

    $('html,table').css('cursor','pointer');    

</script>

现在一切都很美妙。今晚我可以睡得更好:)。

在表中使用JQuery切换跨度文本

1 个答案: