Question

121

handle bootstrap list-group click

rated 0 times [ 122] [ 1] / answers: 1 / hits: 23485 / 9 Years ago, mon, january 4, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neildrews

Add To Favorites

Follow

Total Points: 166

Total Questions: 103

Total Answers: 85

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

neildrews questions

1 scrollIntoView() doesn't scroll anywhere

Fri, Feb 18, 22, 00:00, 2 Years ago

1 MUI - makeStyles - Cannot read properties of undefined

Tue, Oct 12, 21, 00:00, 3 Years ago

1 How to select an option of a slim select with jquery

Tue, Mar 23, 21, 00:00, 3 Years ago

1 Angular: How to refresh a part of html ( form / div / table )

Wed, Aug 19, 20, 00:00, 4 Years ago

1 How to access plugin from nuxt.js store?

Sun, Aug 16, 20, 00:00, 4 Years ago

View All

answered 9 Years ago elians · Accepted Answer

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>