通过ID使用元素而不先声明ID

我试图通过它的ID使用元素，而不显式创建对它的引用。通过ID使用元素而不先声明ID

<button id="btn-1">Show Content A</button> 
<button id="btn-2">Show Content B</button> 
<button id="btn-3">Show Content C</button> 

<div id="content-1">Fancy Pants</div> 
<div id="content-2">Small Town</div> 
<div id="content-3">Cheap Whiskey</div>

如果用户点击一个BTN，我想知道被点击哪一个。

$(???).on("click", function (e) { 
    e.preventDefault(); 
    console.log(this.id); 
}); 

// If user clicks on btn-1 
// console: "btn-1" 

// If user clicks on btn-2 
// console: "btn-2"

来源

2014-03-28 Sophisticake

对于它的价值，你[不需要JavaScript]（http://jsfiddle.net/D8A8P/5/）。 – Sampson

这真的很整齐。这只是我正在工作的一个小窍门，但我不知道CSS可以做到这一点...... – Sophisticake

我很好奇。有没有办法关闭任何可见的div当一个新的按钮被点击？这是我在jQuery中的一些功能。 – Sophisticake

尝试使用attribute starts with selector，

$("[id^='btn-']").on("click", function (e) { 
    e.preventDefault(); 
    console.log(this.id); 
});

来源

2014-03-28 04:55:18

谢谢。这工作。我一直在尝试Google/SO 45分钟，但没有运气。你是最好的！ – Sophisticake

@Sophisticake很高兴帮助..！ “ –

”属性以选择器开头“ - 感谢提及。 – Sophisticake

您可以使用attribute starts with selector。试试这个：

$("button[id^='btn-']").on("click", function (e) { 
    e.preventDefault(); 
    console.log($(this).attr("id")); 
});

DEMO

来源

2014-03-28 04:55:09 Unknown

你的示例代码只显示按钮，让处理器可以简单地适用于所有的按钮：

$('button').on('click', function (e) { 
    console.log(this.id); 
});

一个简单的选择器肩d优于一个使用[id^=...，因为后者将搜索整个文件。

来源

2014-03-28 04:58:06

我从来没有想过会有效...有趣。谢谢。 – Sophisticake

@Sophisticake当您使用jQuery时，Simpler通常更好： –

$("button[id^='btn-']").on("click", function (e) { 
    console.log($(this).attr("id")); 
});

没有必要指定preventDefault。 botton没有任何默认功能动作

来源

2014-03-28 05:00:15 Tuhin

习惯。 * real *代码是一个href。 – Sophisticake

'id'是属性而不是属性。此外，这个答案的要点已多次给出。 –

通过ID使用元素而不先声明ID

回答

相关问题