Question

基于列表元素的单击（我将其设置为与对象相同的ID），我想调用一个函数（在这种情况下，只打印该对象）。我不想在每个列表项上附加一个onclick。我想要这样的东西。

$('#li.menu').click(function(){
    $('li').each(function(){
    var id= $(this).attr('id');
    }
   //when the id is clicked, see the object and if it's there and call print on it)
});



//sample function:

    function print(x){
    console.log(x);
    }

Var myObject = {          
            obj1:{ JSON here},    
            obj2:{ JSON here }
    }

<!-- Bootstrap Simple Sidebar: Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav" id="menu">
        <li>
            <a id="obj1" href="#repo">Repository </a>
        </li>
        <li>
            <a id="obj2" href="#config">Configuration</a>
        </li>

    </ul>
</div>

Answer 1

使用正确的选择器，括号语法和正确的大小写进行事件委托：

＆＃13;

// It's `var`, not `Var` -- capitalization matters in JavaScript
var myObject = {          
    obj1: { foo: "I'm obj1" },
    obj2: { foo: "I'm obj2" }
};

// Event delegation: Hook click on #menu, only fire handler if
// the click goes through an `a` element
$('#menu').on("click", "a", function(){
    //             vvvvvvv-- id of the clicked element
    print(myObject[this.id]);
    // Brackets --^-------^
});
function print(x){
    console.log(x);
}

＆＃13;

<div id="sidebar-wrapper">
    <ul class="sidebar-nav" id="menu">
        <li>
            <a id="obj1" href="#repo">Repository </a>
        </li>
        <li>
            <a id="obj2" href="#config">Configuration</a>
        </li>

    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Jquery获取list元素的id并根据click调用函数

1 个答案: