句柄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列表組點擊

回答

相關問題