为什么我的 if 条件会阻止任一子句执行？答案

【问题标题】：Why does my if condition prevent either clause from executing?为什么我的 if 条件会阻止任一子句执行？
【发布时间】：2023-03-31 16:34:01
【问题描述】：

我正在尝试重写我使用 jQuery 类选择器选择的一组链接的 URL。但是，我只希望重写尚未指定 href 属性的链接，所以我放入了一个 if/else 构造来检查这个......但是，它不起作用.如果没有 if else 语句，它确实可以工作，所以我很确定那是我搞砸的地方。我是 JavaScript 和 jQuery 的新手，如果我的问题很简单和/或过于明显，我很抱歉。

   var url = window.location;
   var barTwitter = $("a.shareTwitter").attr('href');
   if (barTwitter).val() == "null") {
   $("a.barTwitter").attr('href','http://www.twitter.com/home?status='+ url +'');
     } else {
   $("a.barTwitter").attr('href',barTwitter);
   }

【问题讨论】：

您的代码显然是错误的（甚至括号不匹配）。重新表述你的问题会很好，这样我们就可以更好地理解你想要什么，因为代码对此没有多大帮助。
解决语法错误的问题真的让我很生气。你使用 any 类型的调试器吗？！你看过任何东西吗？！我的代码不起作用，有人告诉我为什么！您需要学习如何自己调查此类问题，并且勤奋，否则您成为成功的 Web 开发人员的机会很渺茫。
很容易，乔希。很多人试图在没有适当工具的情况下学习 JS……可悲，但确实如此。
放松一下，乔希。 Stack Overflow 是用来提问编程问题的，而不是用来提问专家级编程问题的。你曾经也是个初学者。
对不起乔希。您是否可以推荐其他工具？我正在努力在这里学习。谢谢！

标签： javascript jquery

【解决方案1】：

if (barTwitter).val() == "null") {

这在语法上无效（算上括号！）。你宁愿做：

if (barTwitter.val() == "null") {

此外，val() 函数仅适用于由 jQuery 包装的输入元素，而不适用于最终只是普通变量的元素属性值。您宁愿将普通变量与文字 null 进行比较：

if (barTwitter == null) {

【讨论】：

啊，解决了。感谢您的澄清！

【解决方案2】：

您的代码实际上存在一些问题... BalusC correctly describes the first one - 您的 if 条件中有语法错误 - 但您可能应该考虑其余的一些问题...

我将从根据 BalusC 的回答更正您的代码开始，并添加 cmets 来描述正在发生的事情：

var url = window.location; // obtain the URL of the current document
// select the href attribute of the first <a> element with a shareTwitter class
var barTwitter = $("a.shareTwitter").attr('href');
if (barTwitter == null) { // if that attribute was not specified,
   // set the attribute of every matching element to a combination of a fixed URL
   // and the window location 
   $("a.barTwitter").attr('href','http://www.twitter.com/home?status='+ url +'');
} else {
   // set the attribute of every matching element to that of the first 
   // matching element
   $("a.barTwitter").attr('href',barTwitter);
}

您的代码的其他问题

好的……现在问题来了：

jQuery 匹配 sets - 单个选择器可能匹配多个元素。因此，如果页面上有多个带有shareTwitter 类的链接，您将提取第一个的href 属性，但changing all of them。这可能不是您想要的，尽管如果只有一个与该类的链接，那么您不在乎。
在 else 子句中，您实际上并没有修改 href...除非您有多个匹配的链接，在在这种情况下，您将更改所有这些以使它们具有第一个的 href。同样，可能不是您想要的，尽管如果只有一个链接则无关紧要...因此，在最佳情况下，else 子句毫无意义，可以省略。
您实际上可以完全省略 if/else 构造：jQuery 允许您测试属性 in the selector itself 是否存在！
您将当前页面的 URL 包含在新的自定义 URL 的查询字符串中 - 但是，您不是 properly escaping 该 URL...这可能会导致问题，因为完整 URL 通常包含以下字符作为 URL 查询字符串的一部分不严格有效。

使用 JavaScript 的注意事项

顺便说一句：如果您打算使用 JavaScript 进行任何开发，您应该获得一些工具。至少，install Firebug 并熟悉使用它和JSLint。前者会在浏览器无法解析或执行您的代码时通知您错误（除了许多其他有用的调试和开发任务），后者将检查您的代码的语法和常见样式错误：在这种情况下，两个工具会迅速通知您代码的初始问题。指导您正确使用这些工具超出了此答案的范围，但请相信我 - 您应该至少花几个小时来阅读和使用它们。

迈向更安全的代码

好的，回到手头的任务...这是我将如何重写您的代码：

var url = window.location; // obtain the URL of the current document
// escape URL for use in a querystring
url = encodeURIComponent(url);
// select all <a> elements with a shareTwitter class and no href attribute
var twitterLinks = $("a.shareTwitter:not([href])");
// update each selected link with a new, custom link
twitterLinks.attr('href', 'http://www.twitter.com/home?status='+ url +'');

请注意，尽管这个新代码完成了相同的任务，但它这样做的同时避免了几个潜在的问题并且保持简洁。这就是 jQuery 的美妙之处……

【讨论】：

感谢您提供的所有信息。我会给萤火虫一枪。我用过一次或两次，但它有点压倒性。长话短说，需要 if/else 构造，根据我上面提供的内容，它可能没有意义，但我有理由使用它。哦，感谢您让我知道 encodeURIComponent，现在继续并包含它。

【解决方案3】：

你所有的语法都搞砸了：if (barTwitter).val() == "null") 应该是 if (barTwitter.val() == "null") 或 if ((barTwitter).val() == "null")

其次，barTwitter 要么是字符串，要么是 null，所以你不能调用 val，这是一个特定于 input 元素的 jQuery 对象方法。

最后，您可能不想与 null 进行比较，因为该值可能是空字符串。因此最好使用长度属性或其他方法。下面是一个带有长度的示例。但我不确定如果没有价值，则 attr 返回什么...检查文档。

var url = window.location;
   var barTwitter = $("a.shareTwitter").attr('href');
   if (barTwitter.length < 1) {
   $("a.barTwitter").attr('href','http://www.twitter.com/home?status='+ url +'');
     } else {
   $("a.barTwitter").attr('href',barTwitter);
   }

【讨论】：