Привязка функции к нескольким элементам с JQuery
Есть несколько способов добиться этого, и вы обычно используете DataTemplateSelector, который назначен свойству ItemsControl ItemTemplateSelector.
Однако вы можете написать решение только для XAML с DataTrigger в ItemContainerStyle ItemsControl:
<ItemsControl ItemsSource="{Binding Messages}">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsImage}" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{Binding Image}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
Обратите внимание, что вам, возможно, не нужно иметь свойство IsImage. DataTrigger также может проверить свойство Image для null:
<DataTrigger Binding="{Binding Image}" Value="{x:Null}">
7 ответов
Используйте закрытие: («это» решение более элегантно, но я публикую его, потому что теперь удаленный ответ содержал закрывающее решение, которое не сработало)
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (var x in links){
$("#" + x).css("border","1px solid #000");
$("#" + x).click(
function(xx){
return function() { alert(xx) };
}(x)
);
};
});
<script type="text/javascript">
$(document).ready(function(){
$('.links').css("border","1px solid #000");
$('.links').live('click', function() {
alert("Link " + $(this).attr('id'));
});
});
</script>
</head>
<body>
<div id="a" class="links">a</div><br />
<div id="b" class="links">b</div><br />
<div id="c" class="links">c</div><br />
Я думаю, это то, что вам нужно:
$(document).ready(function(){
links = {
a:"Link a",
b:"Link b",
c:"Link c",
};
$.each(links, function(id,text){
$("#"+id)
.css("border","1px solid #000")
.click(function(){ alert(text) })
})
});
Вам нужно использовать «это».
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (var x in links){
$("#" + x).css("border","1px solid #000");
$("#" + x).click(function(){
alert("Link "+this.id+" Alert!");
});
}
});
<script type="text/javascript">
$(document).ready(function(){
links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
for (x in links){
$("#" + x).css("border","1px solid #000").click(function(){
alert($(this).attr('id'));
});
}
});
</script>
</head>
<body>
<div id="a">a</div><br />
<div id="b">b</div><br />
<div id="c">c</div><br />
Видя, что вы жестко кодируете элементы, которые должны выполняться в любом случае, вы могли бы сделать это так, поскольку это, вероятно, быстрее и чище, IMO:
$("#a,#b,#c").css("border","1px solid #000");
$("#a,#b,#c").click(function(){
alert("Link "+this.id+" Alert!");
});
Изменить: Я не Не вижу последней части вашего вопроса ... Простите. Вы также можете сделать это:
var links = {};
links.a = "Link a";
links.b = "Link b";
links.c = "Link c";
var ids = '';
$.each(function(key,val) {
ids += "#"+key+","; // extra commas are ignored in jQuery
});
$(ids)
.css("border","1px solid #000")
.bind('click',function(){
alert("Link "+this.id+" Alert!");
});
Приятная вещь о jQuery - это позволяет цепляться и связывать несколько элементов, как CSS.
$(document).ready(function(){
$('#a,#b,#c')
.css("border","1px solid #000")
.bind('click',function(){
// do something
});
});