Question

我正在尝试使用Append to HTML复选框片段的这个功能示例来处理Anchor标记。谢谢！

我几个月来一直在努力......

感谢能够提供解决方案的任何人。我一直在寻找。

此致 Sean Wichert，Sr。:) 512-730-1069（如果你喜欢解决方案，请打电话给我，并且请留下一个语音邮件，因为它是我通过带有耳机的gmail使用的Google语音号码;除非我需要制作，否则通常不会打开它一个电话。

<!-- HEAD STARTS HERE -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        

    <!-- WORKING JAVASCRIPT FOR CHECKBOX TO HTML OUTPUT BELOW -->
    <!-- I NEED TO MAKE THIS ALSO WORK FOR ANCHOR TAGS IS THE QUESTION. -->

    <script type='text/javascript'>//<![CDATA[ 

    $(window).load(function(){
    $('input[type="checkbox"]').click(function () {
        var title = $(this).closest('.pdt-checkbox').find('.HTML-code-insert').html();
        var tempId = $(this).attr('id');

        // If the checkbox is checked, add the item to the ul.
        if($(this).prop('checked')){
            var html = $("<li/>", {
                title: title,
                idholder: tempId,
                text: title
            });
            $('ul.result').append(html);

        } else {

            // if the checkbox is unchecked, remove the item from the ul.
            $('[idholder="' + tempId + '"]', 'ul').remove();        
        }
    });
    });//]]>  

    $.fn.selectText = function () {
        return $(this).each(function (index, el) {
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(el);
                range.select();
            } else if (window.getSelection) {
                var range = document.createRange();
                range.selectNode(el);
                window.getSelection().addRange(range);
            }
        });
    }

    </script>       

<!-- BODY STARTS HERE -->

<!-- WORKING CHECKBOX SAMPLE BELOW -->

<div class="pdt-checkbox"><input type="checkbox" id="pc-repair-step-one" value="Yes" /><label for="pc-repair-step-one">
1. SMWN</label><div style="display:none;" title="#" class="HTML-code-insert">SMWN</div></div>

<!-- NOT WORKING ANCHOR ATTEMPT BELOW -->

<li class="addmenui"><a class="anchor" onclick="javascript:pcSecurityRepair();" href="#" id="pcsecrepair" value="Yes">PC Security Repair</a><label for="pcsecrepair"></label><div title="#" style="display:none;" class="HTML-code-insert">SMWN</div></li>

<div onclick="$(this).selectText()" style="background:url(button.jpg) 0 0 no repeat"; class="ctrl-a" alt="Click me to select the Notes.">           

<ul style="
font-size: 0px;
margin-left: 5px;
margin-top: 0px;
padding: 20px;
font-family: Calibri, Arial, sans-serif;                                    font-weight: 700;                                           line-height: 24px;
text-shadow: 0px 1px 3px #999959;
" class="result">
</ul>       
</div>

Answer 1

http://api.jquery.com/toggleClass/

你应该使用一些类切换而不是值属性

$('a.anchor').click(function () {
        $(this).toggleClass('clicked');

        var title = $(this).parent().find('.HTML-code-insert').html();
        var tempId = $(this).attr('id');

        // If the anchor is clicked, add the item to the ul.
        if ($(this).hasClass('clicked')){
            var html = $("<li/>", {
                title: title,
                idholder: tempId,
                text: title
            });
            $('ul.result').append(html);

        } else {

            // if the anchor is not clicked, remove the item from the ul.
            $('[idholder="' + tempId + '"]', 'ul').remove();        
        }

Answer 2

你可以沿着这些方向尝试......

//content to be inserted
var listItem1 = $('<li>').text('My List Item 1').attr('id', 'listItem1');
var listItem2 = $('<li>').text('My List Item 2').attr('id', 'listItem2');

//reference to target ul
var targetUL = $('#result'); // reference to the result <ul>

//click event for checkbox
$("#pc-repair-step-one").on('click', function () {
    if (this.checked) targetUL.append(listItem1); //checkbox is checked add the item
    else $('#listItem1').remove(); // checkbox is not checked remove the item
});

//click event for anchor
$('#pc-repair-step-two').on('click', function () {
    var listItem = $('#listItem2'); // reference to listItem
    if(listItem.length === 1) listItem.remove(); //item exits remove it
    else targetUL.append(listItem2); // item doesnt exist add it
});

我在那里做的是检查复选框的状态或链接的情况下是否存在插入的元素...并将其附加或从

中删除

这是一个小提琴这个想法工作......希望这可以帮助你的方式 http://jsfiddle.net/pixelchemist/LL5QU/

使用锚标签添加HTML而不是Checkbox或Checkboxes Javascript

2 个答案: