CODEWITHSUNDEEP
javascripttwitter-bootstrap
alex111
alex111

Reputation: 63

handle bootstrap list-group click

I'm stuck with html/JS and have no idea how I should handle some events. For example I have a list-group:

<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>

What I want to do is:

1)change active elements on click.

2)call JS function when element is clicked. UPD: So now I know that click events can be handled with JQuery thing.

What I can't understand is to how to determinate which element is clicked. For example 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
})

There are no tutorials or anything, except this HTML code. Thanks

Upvotes: 4

Views: 25174

Answers (3)

Hybrid
Hybrid

Reputation: 7049

You can simply use jQuery for this.

For example:

$('.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=""
}

Alias would be captures as such:

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

Upvotes: 7

Rajesh
Rajesh

Reputation: 24945

You can try something like this:

function notify(el) {
  resetElements();
  console.log(el.innerHTML);
  el.classList.add('active');
}

function resetElements() {
  // Get all elements with "active" class
  var els = document.getElementsByClassName("active");

  // Loop over Elements to remove active class;
  for (var i = 0; i < els.length; i++) {
    els[i].classList.remove('active')
  }
}
.active {
  font-weight: bold;
}
<div class="col-lg-3 col-md-3 col-sm-3 opciones">
  <div class="list-group">
    <a href="#" onclick="notify(this)" class="list-group-item active">
        Tokyo
      </a>
    <a href="#" onclick="notify(this)" class="list-group-item">London</a>
    <a href="#" onclick="notify(this)" class="list-group-item">Paris</a>
    <a href="#" onclick="notify(this)" class="list-group-item">Moscow</a>
    <a href="#" onclick="notify(this)" class="list-group-item">NY</a>
  </div>
</div>

Upvotes: 2

Chintan Mirani
Chintan Mirani

Reputation: 1465

Here is dynamic jQuery code

$(document).ready(function() {
  $(".list-group-item").live('click', function(){ 
    $('.active').removeClass('active');
    $(this).addClass('active');
    console.log($(this).html()); 
    // Code here whatever you want or you can call other function here
  });
});

This will help you. Enjoy!

Upvotes: 3

Related Questions