Question

我有一个HTML 这种结构

<table id="position_holder">
    <tr>
        <td><a href="#">link1</a>
            <div class="question">question1</div>
            <div class="question">question2</div>
        </td>
    </tr>
    <tr>
        <td><a href="#">link2</a>
            <div class="question">question3</div>
            <div class="question">question4</div>
            <div class="question">question5</div>
            <div class="question">question6</div>
        </td>
    </tr>
</table>

和css使div.question隐藏我有一个javascript女巫需要成为射手（折射）

$('#position_holder td a').on('click', function() {
    if (!$(this).next('.question').text()) {
        alert('No test yet!');
    } else if (confirm($(this).next('.question').text())) {
        if (!$(this).next('.question').next('.question').text()) {
            alert('TestSuccess!');
        } else if (confirm($(this).next('.question').next('.question').text())) {
            if (!$(this).next('.question').next('.question').next('.question').text()) {
                alert('TestSuccess!');
            } else if (confirm($(this).next('.question').next('.question').next('.question').text())) {
                if (!$(this).next('.question').next('.question').next('.question').next('.question').text()) {
                    alert('TestSuccess!');
                } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').text())) {
                    if (!$(this).next('.question').next('.question').next('.question').next('.question').next('.question').text()) {
                        alert('TestSuccess!');
                    } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').next('.question').text())) {
                        if (!$(this).next('.question').next('.question').next('.question').next('.question').next('.question').next('.question').text()) {
                            alert('TestSuccess!');
                        } else if (confirm($(this).next('.question').next('.question').next('.question').next('.question').next('.question').next('.question').text())) {
                            alert('Test Success!');
                        } else {
                            alert('Test Faluture');
                        }
                    } else {
                        alert('Test Faluture');
                    }
                } else {
                    alert('Test Faluture');
                }
            } else {
                alert('Test Faluture');
            }
        } else {
            alert('Test Faluture');
        }
    } else {
        alert('Test Faluture');
    }
    return false;
});

这向用户逐一提出问题，首先检查是否有更多问题，然后如果他选择“机会”测试结果，如果他选择了确定，则转到下一个问题

请帮我更方便地做到这一点，我觉得这段代码很可怕！

Answer 1

使用它。这基本上是做同样的事情，因为有问题的代码会减少字符数。

$('#position_holder td a').on('click', function() {
    if (!$(this).next('.question').text()) {
        alert('No test yet!');
    } else {

        var $questions = $(this).closest('td').find('.question');
        var questionCount = $questions.length;

        var count = 0;
        // Loop through all the questions
        $questions.each(function() {
            if (confirm($(this).text())) {
                if (++count === questionCount)
                    alert('TestSuccess!');
            } else {
                alert('Test Failure!');
                return false; // will break out of `each`
            }
        });
    }
});

Answer 2

您可以这样做：

$('#position_holder td a').on('click', function(){
    var question = $(this).next('.question');

    // check if the question has text
    if(!question.text()){
        alert('No test yet!');
        return;
    }

    // loop until test success or test failure
    while(true) {

        // confirm current question
        if(confirm(question.text())) {

            // take next question
            question = question.next('.question');

            // success if no text
            if(!question.text()){
                alert('TestSuccess!');
                break;
            }

            // continue if there is text
            continue;
        }

        // stop if confirm was canceled
        alert('Test Faluture');
        break;
    }
});

演示：http://jsfiddle.net/9xknufsq/1/

Answer 3

你好我在你的html中找不到#position_holder li但这里是我在你的HTML上创建的脚本

$('table a').on('click', function () {
    $(this).parents("td").find(".question").each(function (index) {
        if(!confirm($(this).text())){
           alert('Test Failure');
           return false;
        }else{
           alert('Test Success !');
        }
    });
    return false;
});

工作演示http://jsfiddle.net/patelmit69/1gm7wj51/6/

我需要重构javascript代码（让它更好，更小）

3 个答案: