Question

我正在尝试重写我使用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);
   }

Answer 1

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

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

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

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

if (barTwitter == null) {

Answer 2

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

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

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匹配集 - 单个选择器可以匹配多个元素。因此，如果页面上有多个带有shareTwitter类的链接，您将为第一个提取 href 属性，但changing all of them。这可能不是你想要的，虽然如果只有一个与该类相关的链接，那么你就不在乎了。
在 else 子句中，您根本没有实际修改 href ... 除非您有多个匹配的链接，否则在哪种情况下，您将更改所有这些内容，以便他们拥有第一个 href 。同样，可能不是你想要的，尽管只有一个链接是不相关的...所以，在最好的情况下， else 子句是没有意义的，可以省略。
您实际上可以完全省略if / else构造：jQuery允许您测试属性in the selector itself的存在！
您在新的自定义网址的查询字符串中包含当前网页的网址 - 但是，您不是properly escaping该网址...这可能会导致问题，因为完整网址通常包含字符作为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的魅力......

Answer 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);
   }

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

3 个答案:

您的代码的其他问题

使用JavaScript的注意事项

转向更安全的代码