Question

我正在尝试使用jquery对象上的html方法有条件地设置元素的html内容。我不确定哪种方法是正确的。另外在html方法调用中使用if语句或其他东西

例如，我尝试使用jquery在图像上设置不同的大小。

if(settings.imagesize =='1') {
// do something 
 }

所以我试着把它作为参数放在html方法中

.html(if(settings.imagesize=='1') { '<img src="image1.png"/>' })

为了给出上述代码的上下文，这里是完整结构的样子：

for (var i = 1; i <= 25; i++) {
    var clone = drop.clone()
        .appendTo('body')
        .css(direction, Math.random() * jQuery(window).width() - 20)
        .css('top', snowTop)
        .html(
    if (i == '21') {})
}

我不确定我做错了什么，有人可以帮我吗？

感谢。

Answer 1

你不能在方法调用中执行if语句，而不是像至少那样。

如果你真的必须，你可以做三元。

.html(settings.imagesize=='1' ? '<img src="image1.png"/>' : '');

但是最合适的方式是在调用之前处理所有逻辑......

var content;
if(settings.imagesize=='1') 
{ 
    content = '<img src="image1.png"/>';
}
something.html(content);

如果真的在html调用中需要if，则可以将其作为即时函数。

.html((function(){
    if(settings.imagesize=='1'){
        return '<img src="image1.png"/>';
    }
    else{
        return '';
    }
})());

但是，您的代码难以阅读......

Answer 2

你需要这样做

var content = ''
if(settings.imagesize =='1') {
    content = '<img src="image1.png"/>'
}

.html(content)

修改

您可以使用这样的三元运算符来获得清晰的代码。

var content = (settings.imagesize =='1') ? '<img src="image1.png"/>' : ''

.html(content)

这更具可读性，而不是在.html

中内联调用if条件

Answer 3

您可以使用Conditional Operator执行此操作：

.html((settings.imagesize == '1') ? '<img src="image1.png"/>' : 'other html');

Answer 4

不是一个愚蠢的问题：）

这是你如何做到这一点的。虽然我不建议做这样的事情。 您可以在外面进行此类操作。

.html( settings.imagesize=='1'? '<img src="image1.png"/>' : '' );

Answer 5

您可以尝试if

的三元版本

.html(i=='21' ? true : false)

Answer 6

您只有一个选项。请尝试使用ternary operator

.html((settings.imagesize=='1') ? '<img src="image1.png"/>' : '' )

但最好使用if条件，而不是ternary。

Answer 7

对于较长的例子，其他答案的逻辑如下：

for (var i = 1; i <= 25; i++) {
    var content = '';

    if(i == 21)
        content = 'something';

    var clone = drop.clone()
        .appendTo('body')
        .css(direction, Math.random() * jQuery(window).width() - 20)
        .css('top', snowTop)
        .html(content);
}

看起来你可能会在三元组之间产生一些混淆，如果 - 它们与三元组基本相同，只是用简写符号表示if / else语句：

if(something)
    thenDoThis();
else
    doThat();

与

相同

something ? thenDoThis() : doThat();

这里的区别是在方法调用中不允许if，而三元语句很好：

console.log(if(something){ thenDoThis(); });
// SyntaxError: Unexpected token if

console.log(something ? thenDoThis() : doThat());
// works fine

Answer 8

可以查看

.html(i=='21' ? true : false)

Answer 9

首先，您可以使用ternary operator：

.html((settings.imagesize=='1') ?'<img src="image1.png"/>' : '' )

但我认为更好的方法是调用函数

.html(func(settings.imagesize));
function func(size){
     if(size === 1)
        return '<img src="image1.png"/>';
     return '';
}

或使用自我调用功能：

.html(
(function func(size){
     if(size === 1)
        return '<img src="image1.png"/>';
     return '';
})(settings.imagesize));

如果条件在jquery

9 个答案: