jquery - 在 jquery 函数中使用 href 作为 var

Question

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

这样做的全部目的是

• 评估一段文本。计算并限制显示为 200 个字符
• 在文本其余部分之前插入带有 onclick 的 ahref 链接
• 在文本的其余部分周围放置一个跨度
• 在链接之后在 Span 内插入另一个 ahref 链接，就在结束 Span 标记之前
• 并将所有修改后的内容插入 div 中

我截取了两段代码

• 1) 修剪文本，并用 span 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/