【问题标题】:Any way to toggle between two strings using one piece of JavaScript?有什么方法可以使用一段 JavaScript 在两个字符串之间切换?
【发布时间】:2011-04-17 23:44:21
【问题描述】:

我想做类似的事情

if(something.val() == 'string1')
{
     something.val('string2');
}
else if(something.val() == 'string2')
{
    something.val('string1')
}

但在一行代码中。我不太记得它是如何完成的,但它涉及问号和冒号......

【问题讨论】:

    标签: javascript jquery logic


    【解决方案1】:

    试试:

    something.val(something.val() == 'string1' ? 'string2' : 'string1');
    

    称为三元表达式。

    【讨论】:

    • 但这将设置string1,即使值为string3,而不仅仅是string2
    • @dev-null-dweller 这不是问题 - 我在“回复”和“取消”之间切换按钮中的文本 :)
    【解决方案2】:

    看,没有三元运算符!

    以下工作是因为 Javascript 短路了布尔表达式。

    如果something == string1 则计算string2 -- 因为string2 是一个真实 值,并且下一个表达式涉及OR 运算,因此无需继续。停止并返回string2

    如果something !== string1,那么它将跳过下一个操作数,因为如果它为假,则评估下一个操作数(使用AND)毫无意义。它将“跳转”到 OR 操作并返回 string1

    function toggleString(something, string1, string2) {
       return something == string1 && string2 || string1;
    }
    
    something.val(toggleString(something.val(), "string1", "string2"));
    

    如果你想完成任务:

    function toggleValue(something, string1, string2) {
       something.val(something.val() == string1 && string2 || string1);
    }
    
    toggleValue(something, "string1", "string2"); // something is a jQuery collection
    

    然而,最后我还是会使用三元运算符,因为其他程序员可能不清楚这个解决方案。如果您来自 Java 或其他语言,由于所有布尔运算符,您可能希望该函数返回一个布尔值。

    【讨论】:

    • 好的,所以你仍然必须在某处分配给something。你没有分配,你只是比较。
    • @Daniel ...是的,我知道。我的观点更像是三元读取比这更快,你仍然必须在你的聪明帖子中展示作业;)
    • +1 聪明的解决方案,虽然你应该解释为什么这是有效的。
    • 谢谢 - 因为我正在做这个内联,所以我想要什么有点啰嗦,但仍然很方便!
    • @drachenstern:由于其他人都发布了三元运算符解决方案,因此发布同样的内容确实没有意义。此功能将根据某物在两个值之间切换。他如何使用它(如果有的话)将取决于他——如果他想让该功能更易于使用,则由他来修改它。此外,something 是一个字符串(它是不可变的),所以无论如何我都无法更改它。我将添加解释并添加执行任务的版本以满足你们
    【解决方案3】:

    使用对象属性的另一种方法:

    { 'string1': 'string2', 'string2': 'string1' }[value]
    

    如题:

    something.val(
      { 'string1': 'string2', 'string2': 'string1' }[something.val()]
    )
    

    【讨论】:

    • 这是一个极端的问题,但是如果您要回答它,也许您可​​以添加一个示例实现,您会注意到大多数赞成的答案。干杯
    • 非常聪明!我很想使用它,但有两个原因; 1,目前还不清楚这段代码做了什么,2,现在我会使用 ES6 解构,比如[ string2, string1 ] = [ string1, string2 ]
    • @Bojangles 两个切换两个字符串,是的,但是您将如何使用 ES6 功能来解决您的原始问题?
    【解决方案4】:

    如何将@Daniel 的代码与 jquery 函数一起使用:

    $.fn.toggleVal = function (str1, str2) {
         return this.val(this.val() == str1 && str2 || str1);
    };
    $("input").toggleVal('string 1', 'string 2');
    

    【讨论】:

    • 使用我的解决方案而不是三元运算符确实没有任何好处 - 我只是认为提供替代版本会很好:)。不过不错! this 不是已经是 jQuery 对象了吗?所以不需要用$ 函数包装它。此外,当调用 val 作为 setter 时,jQuery 可能会返回 this,因此您可以将这两行合并为一个单行返回语句。
    • 确实你是对的。感谢您的提示:) 我将更新代码。我喜欢你的三元运算符,因为问号吓到我了:P
    【解决方案5】:

    虽然,带有三元运算符的解决方案是最易读的,你也可以使用 Lodash 的 xor:

    x = _.xor([a, b], [x])[0]
    

    针对您的具体情况:

    something.val(_.xor(['s1', 's2'], [something.val()])[0]);
    

    参考:https://lodash.com/docs/4.17.10#xor

    【讨论】:

      【解决方案6】:

      你的意思是使用三元运算符:

      something.val((something.val() == 'string1') ? 'string2' : 'string1');
      

      【讨论】:

      • 你为什么要把jquery对象抓回来?
      【解决方案7】:

      从 jQuery 1.4 开始,您可以这样做:

      something.val(function(index, val) {
          return val == 'string1' ? 'string2' : 'string1';
      });
      

      【讨论】:

        【解决方案8】:
         something.val( something.val() == 'string1'? 'string2' : 'string1' );
        

        或澄清

        val astring = something.val() == 'string1'? 'string2' : 'string1';
        something.val( astring );
        

        【讨论】:

          【解决方案9】:
          something.val(something.val() == 'string1' ? 'string2' : 'string1');
          

          【讨论】:

            【解决方案10】:

            我的方法是在类似的情况下:

            let value = 0
            
            const toggleTwoValues = () => 
              value === 0 ? value = 1 : value = 0

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2011-05-15
              • 1970-01-01
              • 1970-01-01
              • 2017-09-04
              • 1970-01-01
              • 1970-01-01
              • 2012-01-12
              相关资源
              最近更新 更多