Question

我有form个input个，select个option个，其中6个值为1-6。

提交此表单后，会创建一个li，其值为input和select，并且可以正常使用。

创建li的脚本：

`$('#list_wrapper').append('<li id="placeholder">'+'<a id="placeholder_url">'+'<img id="placeholder_img"/>'+'</a>'+nameUnformat+', '+price+', '+rate+'/6'+'</li>');`

这创造了<img> A name, a price, 5/6

的内容

如果没有指定price，那么我希望它，而不是额外的逗号，只需写“免费”。

如果没有指定图片网址，则不应该生成<img/>标记。

如果未指定评级，则不应只写“/ 6”。

等<a>。

我怎么能这样做？我想到了一个switch声明，但我不太确定我怎么能做到这一点。

我想这可以使用javascript完成，但我不知道如何，所以你能帮助我:)如果你需要我的代码或信息，那么请问我将在帖子中编辑< / p>

我的代码：

<div id='list_wrapper'>
</div>

<form id='form1'>
    <input type='text' name='item_name' placeholder='Name of item (required)'>
    <input type='text' name='item_price' placeholder='Price of item'>
    <input type='text' name='item_img' placeholder='Direct url to image'>
    <input type='text' name='item_url' placeholder='Url to item'>
    <select id="rating">
        <option value=''>Rating</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <div id='click'></div>
</form>

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

            var nameUnformat = $('input[name=item_name]').val();
            var nameFormat = nameUnformat.replace(/\s/g, '');
            var price = $('input[name=item_price]').val();
            var img = $('input[name=item_img]').val();
            var url = $('input[name=item_url]').val();
            var rate = $('#rating').val();

            $('#list_wrapper').append('<li id="placeholder">'+'<a id="placeholder_url">'+'<img id="placeholder_img"/>'+'</a>'+nameUnformat+', '+price+', '+rate+'/6'+'</li>');
    });


        });
</script>

Answer 1

您想要一系列if语句而不是switch;它会变得非常简单，就像这样：

// If the `img` variable is defined (e.g. someone filled out the appropriate
// field in the form, create an `<img>` tag, using that content as the `src`
// attribute, and finally append it to the `li` element.
if( img ){
    $('<img/>',{src: img}).appendTo($li);
    // If the `url` is defined (see above), wrap the `img` tag in an anchor
    // element with that url.
    if( url )
        $li.find('img').wrap( $('<a/>',{href: url}) );
}
// If the `price` variable is defined, create a `span` element with the class
// of `price` (I thought it was useful for styling and manipulating purposes)
// and write its text content like so: “, {price}”.
if( price )
    $('<span/>',{class: 'price'}).text(', ' + price).appendTo($li);
// Same as `price` above, except the text content will be “, {rate}/6}
if( rate )
    $('<span/>',{class: 'rate'}).text(', ' + rate + '/6').appendTo($li);

// Finally append the `li` to the wrapper.             
$('#list_wrapper').append($li);

Answer 2

您可以使用javascript中的内联条件（（条件）？true：false）：

$('#list_wrapper').append('<li id="placeholder">'+ ((url)?'<a id="placeholder_url">':'')+((img)?'<img id="placeholder_img"/>':nameFormat)+((url)?'</a>':'')+((!url)?nameUnformat:'')+', '+((price)?price:'free')+((rate)?', 'rate+'/6':'')+'</li>');

虽然所有这些都使你很难阅读/调试。

想要根据不同变量的值更改输出

2 个答案: