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.
精彩评论