Question

我有一个函数，需要将一些变量附加到div。其中一个变量是与onclick的href链接。如何格式化链接以在函数中的var中工作？以下不起作用。

这样做的全部目的是

评估一段文字。计算并将显示限制为200个字符
在文本的其余部分之前插入带有onclick的ahref链接
围绕文本的其余部分抛出一个范围
在链接后插入跨度内的另一个ahref链接，就在关闭span标记
并将所有此修改后的内容插入div

我已经拍了两段代码

1）修剪文本，并包裹在范围jquery limit text by length
2）点击显示，点击http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

我正在尝试将它们混合起来以提出我需要的东西。每个代码段都可以自行运行。

这是我现在拥有的代码：

<script type="text/javascript">
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
    }
    function hideStuff(id) {
        document.getElementById(id).style.display = 'none';
    }
$(function() {
    var limit = 200;
    var chars = $("#myDiv").text(); 
    if (chars.length > limit) {
        var visiblePart = $("<div> "+ chars.substr(0, limit-1) + "</div>");
        var readMore = $(<a href="#" onclick="showStuff('answer1'); return false;">open</a>);      
        var hiddenPart = $("<span id='answer1' style='display: none;'> " + chars.substr(limit-1)  + "</span>");
        var readLess = $(<a href=\"#\" onclick=\"hideStuff('answer1'); return false;\">close</a>); 
        });

        $("#myDiv").empty()
            .append(visiblePart)
            .append(readMore)
            .append(hiddenPart)
            .append(readLess);
    }
});

Answer 1

如果你使用jQuery，那么一致地使用它。您上面遇到的最大错误是HTML不在字符串中，因此您将在JavaScript中遇到语法错误。

这是一个稍微改进的版本：

$(function() {
    var limit = 200;
    var chars = $('#myDiv').text(); 
    if (chars.length > limit) {
        var visiblePart = $('<div />').text(chars.substr(0, limit-1));
        var readMore = $('<a />', {
             href: '#',
             click: function() {
                 hiddenPart.show();
                 return false;
             },
             text: 'open'
        });      
        var hiddenPart = $('<span />', {text: chars.substr(limit-1)}).hide();
        var readLess = $('<a />', {
             href: '#',
             click: function() {
                 hiddenPart.hide();
                 return false;
             },
             text: 'close'
        });  

        $('#myDiv').empty()
            .append(visiblePart)
            .append(readMore)
            .append(hiddenPart)
            .append(readLess);
    }
});

它还远没有完美，但可能会给你一个开始：http://jsfiddle.net/fkling/cXw5D/

Answer 2

上面修改了Felix的版本，因此两个链接没有同时显示：

http://jsfiddle.net/cXw5D/4/

编辑：

最后一次清理语法：

http://jsfiddle.net/cXw5D/5/

在hquery函数中使用href作为var

2 个答案: