访问列表项的元素onclick

时间:2014-11-05 15:01:00

标签: javascript jquery html css

大家好我对jquery和css很新,我试图访问以下内容:

console

我正在尝试检查onClick功能' checkForAppointment' 4个span标签内的值。

HTML:

<div align="thun" id="clientScheduleWeek"  data-role="page" data-theme="a">
    <div data-role="header" data-theme="a">
        <a href="#" onclick="JUMPclientDetails()">Back</a>
        <h1>Client Details</h1>
    </div>
    <div data-role="content">
        <div id="weekViewBubble">
                <ul data-count-theme="b" data-inset="true" data-role="listview" data-theme="c">
                    <li onClick="checkForAppointment();"><a>Monday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Tuesday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Wednesday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Thursday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Friday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Saturday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                    <li onClick="checkForAppointment();"><a>Sunday <span class="ui-li-count ui-btn-corner-all countBubl">0</span></a></li>
                </ul>
        </div>
    </div>
</div>

我的开始尝试:

function checkForAppointment(){
    console.log('getting to the function anyway');
    var j = $('ul li').eq(0).value;
    var k = $('ul li').eq(1).value;

    console.log('j is ' + j + ' and k is '+ k);
};

此时j和k都未定义

修改 lolka_bolka建议的功能:

function checkForAppointment(){
    var AptBool=false;
     $('.something').click(function() {
        console.log('we have entered the .click function');
        //Get all the span inside of it
        var collection = $(this).find('span');

        //Loop through all span object
        $.each(collection, function(idx, obj) {
            if ($(obj).html() > 0){
                AptBool=true;
                //return;
            }

            //Write the html value of span to the console.
            //console.log('value here is ' + $(obj).html());
        });

        if (!AptBool){
            alert('There is no appointment to view');
            return;
        }

    });


    //console.log('getting to the function anyway');
    //var j = $('ul li').eq(0).text();
    //var k = $('ul li').eq(1).text();

    //console.log('j is ' + j + ' and k is '+ k);
};

1 个答案:

答案 0 :(得分:1)

因为您没有向我们提供HTML代码,所以您证明了一个图片,我只是做了一个例子,我希望您能理解它的逻辑:

<强> HTML

<li class="something">
    Click here
    <div>
        <span>0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</li>

<强>的jQuery

$(function() {
    //On li click where li has .something class
    $('.something').click(function() {

        //Get all the span inside of it
        var collection = $(this).find('span');

        //Loop through all span object
        $.each(collection, function(idx, obj) {
            //Write the html value of span to the console.
            console.log($(obj).html());
        });
    });
});