используйте href как переменную в функции jquery

Question

У меня есть функция, которая требует добавления некоторых переменных в div.Один из вариантов - это ссылка href с onclick.Как мне отформатировать ссылку для работы в var внутри функции?Приведенное ниже не работает.

В чем заключается цель

• оценки блока текста.Подсчитайте и ограничьте отображение до 200 символов
• вставьте ссылку Ahref с помощью onclick до оставшейся части текста
• вставьте промежуток вокруг оставшейся части текста
• после ссылкивставьте еще одну ссылку ahref в промежуток, прямо перед закрывающим тегом span
• и вставьте все это измененное содержимое в div

Я взял два фрагмента кода

• 1) обрезать текст и переносить его в промежуток jquery ограничить текст по длине

• 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

Измененная версия Феликса выше, поэтому обе ссылки не показывались одновременно:

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

РЕДАКТИРОВАТЬ:

В последний раз очищен синтаксис:

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