javascript - 处理 bootstrap list-group click

Question

我被 html/JS 困住了，不知道我应该如何处理一些事件。例如我有一个列表组:

<div class="col-lg-3 col-md-3 col-sm-3 opciones">
   <div class="list-group">
      <a href="#" class="list-group-item active">
        Tokyo 
      </a>  // barfoobarfoo
      <a href="#" class="list-group-item">London</a> // foo
      <a href="#" class="list-group-item">Paris</a>  // bar
      <a href="#" class="list-group-item">Moscow</a>  // foobar
      <a href="#" class="list-group-item">NY</a>   //foobarfoo
    </div>
</div>

我想做的是:

1) 在点击时更改事件元素。

2)点击元素时调用JS函数。更新:所以现在我知道点击事件可以用 JQuery 东西处理。

我无法理解的是如何确定单击了哪个元素。例如 JQuery:

$('.list-group-item').on('click', function() {
    $this = $(this);

    $('.active').removeClass('active');
    $this.toggleClass('active')

   function simpleFunc(someargument) { //value of this argument depends on clicked item and can be (foo|bar|foobar ) etc
       document.write(someargument) // here whould be written some text (foo|bar|foobar ) etc
})

除此 HTML 代码外，没有任何教程或任何内容。谢谢

Answer 1

为此您可以简单地使用 jQuery。

例如:

$('.list-group-item').on('click', function() {
    var $this = $(this);
    var $alias = $this.data('alias');

    $('.active').removeClass('active');
    $this.toggleClass('active')

    // Pass clicked link element to another function
    myfunction($this, $alias)
})

function myfunction($this,  $alias) {
    console.log($this.text());  // Will log Paris | France | etc...

    console.log($alias);  // Will output whatever is in data-alias=""
}

别名将是这样的捕获:

<a data-alias="Some Alias Here">Link<\a>