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

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

这会一个一个地向用户提出问题，首先检查是否还有更多问题，然后如果他 select "chancel" 测试结束并发出错误警报，如果他 select ok，他转到下一个问题

请帮我做这个更方便的方法，我觉得这段代码很糟糕！

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 代码（让它变得更好，更小）

I need to refactor the javascript code(make it better, and smaller)

javascript

jquery

refactoring

event-handling