句柄bootstrap列表组点击

-2

我坚持使用html/JS，并不知道如何处理一些事件。比如我有一个列表组：句柄bootstrap列表组点击

<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函数。 UPD：所以现在我知道点击事件可以用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代码。感谢

来源

2016-01-04 alex111

好的，你到目前为止使用JavaScript尝试过什么？ –

我还没有尝试过任何东西。我只是不知道如何确定哪个元素被点击。我有启动Google地图的initMap函数。我想传递一些参数到这个func中，并在需要用特殊参数重新加载地图时调用它。 – alex111

你可以简单地使用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>

来源

2016-01-04 12:07:59 Hybrid

如何确定哪个元素被点击？我想将一个参数传递给JS函数 – alex111

你可以使用'$ this'来确定被点击的链接 - 但是，通过“将参数传递给JS函数”到底是什么意思？ – Hybrid

每个元素都是相同的，除了文本。我应该根据文本确定它吗？ – alex111

你可以尝试这样的事情：

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>

来源

2016-01-04 12:06:36 Rajesh

这里是动态的jQuery代码

$(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 
    }); 
});

这将帮助你。请享用！

来源

2016-01-04 12:16:39

句柄bootstrap列表组点击

回答

相关问题