开发者

Why doesn't my JavaScript ternary operator work?

<script type="text/javascript">
    $(document).ready(function () {

        $('[type=button]').click(function () {
            var modelcount = $('#modelcount').val();
            modelcount++;
            if (modelcount >= 10) {
                $("#prodform").prepend('<div class="validation-summary-errors"><ul><li>Only 10 serial numbers can be added</li></ul></div>');开发者_运维百科
                $('[type=button]').attr("disabled", "disabled");
                $('[type=button]').removeClass().addClass('disabled');
            }
            else { //THIS BIT HERE!!!!!
                $(".entry").last().after().append('<div class="entry"><label for="HandHeldProducts_' + modelcount + '__SerialNumber">Serial Number</label><input' + ($.MyFunction($("#BothProducts"))) ? 'disabled = "disabled"' : '' + ' class="serial" id="HandHeldProducts_' + modelcount + '__SerialNumber" name="HandHeldProducts[' + modelcount + '].SerialNumber" placeholder="Serial Number" type="text" value="" /></div>')
                $('#modelcount').val(modelcount);
            }
        });

        $.MyFunction = function (elemnt) {
            return (elemnt.attr("checked") != "undefined" && elemnt.attr("checked") == "checked");
        };

    });
</script>


What you are doing :

$(".entry").last().after().append(
    '<div class="entry"><label for="HandHeldProducts_' + 
    modelcount + 
    '__SerialNumber">Serial Number</label><input' +
    ($.MyFunction($("#BothProducts"))) ? 
        'disabled = "disabled"' : 
        '' + ' class="serial" id="HandHeldProducts_' + 
            modelcount + 
            '__SerialNumber" name="HandHeldProducts[' + 
            modelcount + 
            '].SerialNumber" placeholder="Serial Number" type="text" value="" /></div>'
)

Basically above the rest of your string concatenation is in the "else" block of the ternary

To avoid this wrap your tenary in brackets.

What you want to do :

$(".entry").last().after().append(
    '<div class="entry"><label for="HandHeldProducts_' + 
    modelcount + 
    '__SerialNumber">Serial Number</label><input' +
    (($.MyFunction($("#BothProducts"))) ? 
        'disabled = "disabled"' : 
        '') + 
    ' class="serial" id="HandHeldProducts_' + 
    modelcount + 
    '__SerialNumber" name="HandHeldProducts[' + 
    modelcount + 
    '].SerialNumber" placeholder="Serial Number" type="text" value="" /></div>'
)

The real problem

String concatenation like this is a *****. Use the DOM or use templates.

Below is DOM: (un-tested)

$(".entry").last().after().append(
    $("<div></div>", {
        "class": "entry"    
    }).append(
        $("<label></label>", {
            "label": "HandHeldProducts_" + modelcount + "__SerialNumber"
            "text": "Serial Number"
        })  
    ).append(
        $("<input/>", {
            "class": "serial",
            "id": "HandHeldProducts_" + modelcount + "__SerialNumber"
            "name": "HandHenldProducts[" + modelcount + "].SerialNumber",
            "placeholder": "Serial Number",
            "type": "text",
            "value": ""
        })
    )
);

if ($.MyFunction($("#BothProducts")) {
    $("#HandHeldProducts_" + modelcount + "__SerialNumber").attr("disabled", "disabled");
}


Try to break up the string into bits to make it easier to understand:

var html = '<div class="entry">';
html += '<label for="HandHeldProducts_'+modelcount+'__SerialNumber">Serial Number</label>';
html +=  '<input'+($.MyFunction($("#BothProducts")) ? 'disabled = "disabled"' : '');
html += ' class="serial" id="HandHeldProducts_' + modelcount;
html += '__SerialNumber" name="HandHeldProducts[' + modelcount + '].SerialNumber"';
html +=' placeholder="Serial Number" type="text" value="" />';
html += '</div>';
$(".entry").last().after().append(html);
$('#modelcount').val(modelcount);

I didn't see anything wrong while I broke the string up, but there might have been a spare parenthesis in there. All in all, I think the only problem here was the excessive line length - that kind of code is hard to keep clean, and hard to debug.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜