2

我有以下代码：

<html>
<head>
<link rel="stylesheet" href ="java.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function meal(){ 
    var checkboxes = document.getElementsByName('checkboxes');
    var i=0;
    var j=0;
    var dish = [
    ["Boiled eggs","Eggs"],
    ["BLT Sandwich","Bacon"],
    ["BLT Sandwich","Lettuce"],
    ["BLT Sandwich","Tomato"],
    ["BLT Sandwich","Bread"],
    ["American Breakfast","Eggs"],
    ["American Breakfast","Bacon"],
    ["American Breakfast","Bread"],
    ["French Fries","Patatoes"]
    ];
    var content = "";
    for (i=0 ; i < dish.length; i++){
        for(j=0 ; j< checkboxes.length; j++){
            if ((dish[i][1] == checkboxes[j].value)&&(checkboxes[j].checked)){
            content+= dish[i][0] + '<br>';
            }
        }
    }
    document.getElementById("result").innerHTML = content;
}
</script>
</head>

<body>


<div id="big_one"> 
    <header id="Welcome">
        <h1>Welcome</h1>
    </header>
    <div id= "new_div">

    <section id="check_boxes">
        <article >
            <header>
                <form name="ingredient">
                    <input type="checkbox" name="checkboxes" value="Eggs"> Eggs <br>
                    <input type="checkbox" name="checkboxes" value="Bacon"> Bacon <br>
                    <input type="checkbox" name="checkboxes" value="Lettuce"> Lettuce <br>
                    <input type="checkbox" name="checkboxes" value="Tomato"> Tomato <br>
                    <input type="checkbox" name="checkboxes" value="Bread"> Bread <br>
                    <input type="checkbox" name="checkboxes" value="Patatoes"> Patatoes </br>
                </form>
            </header>

        </article>
        <article >
            <header>
                <form name="Button">
                    <input type="button" name="Check" onClick="meal()" value="Search">
                </form>
            </header>

        </article>

    </section>

    <div id="result">
    </div>

    </div>
    <footer id="the_footer">
        Copyright &#169 Dejan Ivanov
    </footer>
</div>

</body>
</html>

这段代码的想法是：如果我选择“eggs”只显示菜“煮鸡蛋”，如果我选择“鸡蛋”、“培根”和“面包”显示菜“煮鸡蛋”和“美式早餐” , 但节目给我看“煮鸡蛋”、两次“BLT 三明治”和三次“美式早餐”

For example if the known recipes are:
Boiled eggs -> Eggs
BLT Sandwich -> Bacon, Lettuce, Tomato, Bread
American Breakfast -> Eggs, Bacon, Bread

and the available ingredients are:
Bread, Eggs and Bacon

The search result should be:
Boiled eggs
American Breakfast

你能帮我在Javascript代码中解决这个问题吗？

4

1 回答 1

0

这应该对你有用：http: //jsfiddle.net/itsmikem/4EJb7/27/ 如果它适合你，请告诉我。

我不得不更改您的 html 和 javascript 相当多：

HTML：

<div id="big_one">
    <header id="Welcome">
         <h1>Welcome</h1>

    </header>
    <div id="new_div">
        <section id="check_boxes">
            <article>
                <header>
                    <form name="ingredient">
                        <!--Wrapping the input in a <label> tag makes the word clickable, too, not just the checkbox-->
                        <label>
                            <input type="checkbox" value="">Eggs</label>
                        <br>
                        <label>
                            <input type="checkbox" value="">Bacon</label>
                        <br>
                        <label>
                            <input type="checkbox" value="">Lettuce</label>
                        <br>
                        <label>
                            <input type="checkbox" value="">Tomato</label>
                        <br>
                        <label>
                            <input type="checkbox" value="">Bread</label>
                        <br>
                        <label>
                            <input type="checkbox" value="">Potatoes</label>
                        <br>
                    </form>
                </header>
            </article>
            <article>
                <header>
                    <form>
                        <input id="gatherIngredients" type="button" onClick="meal();" value="Search">
                    </form>
                </header>
            </article>
        </section>
        <div id="result"></div>
    </div>

javascript:

// initialize the following lines once on the page so you don't have to do this every time you run the dish search:
// your data:
var allDishes = [
    ["Boiled eggs", ["Eggs"]],
    ["BLT Sandwich", ["Bacon", "Lettuce", "Tomato", "Bread"]],
    ["American Breakfast", ["Eggs", "Bacon", "Bread"]],
    ["French Fries", ["Potatoes"]]
];
// assemble a list of references to all of the checkboxes:
var checkboxes = document.querySelectorAll("input[type=checkbox]");
// tell the Search button to run the function "meal" when you click it:
document.getElementById("gatherIngredients").addEventListener("click", meal);
// this runs when the Search button is clicked:
function meal() {
    // STEP 1: make a record of all the ingredients you've selected:
    var selectedIngredients = [];
    for (var i = 0; i < checkboxes.length; i++) {
        // ensure that your text on the page matches exactly what the value is, so you won't get an error if you misspell one of the ingredients
        var newVal = String(checkboxes[i].parentNode.textContent).replace(/^[ \W]+|[ \W]+$/, "");
        checkboxes[i].value = newVal;
        //        alert(String("X" + newVal + "Y"));
        //checkboxes[i].value = "sal";
        // alert(checkboxes[i].value);
        if (checkboxes[i].checked) {
            // this item was checked, so add it to selectedIngredients
            selectedIngredients.push(checkboxes[i].value);
        }
    }
    // STEP 2: determine if each ingredient that was selected also has available all the other ingredients available to make any of the dishes
    var dishesThatCanBeMade = [];
    for (var eachIngredient = 0; eachIngredient < selectedIngredients.length; eachIngredient++) {
        // Let's start off by assuming all ingredients needed for each dish are selected. If one ingredient is not selected, this turns false.
        var allIngredientsAreAvailable = true;
        var thisIngredient = selectedIngredients[eachIngredient];
        // check each dish...
        for (var eachDish = 0; eachDish < allDishes.length; eachDish++) {
            var allIngredientsNeededForThisDish = allDishes[eachDish][1];
            // does this dish have this selected ingredient?       
            if (allIngredientsNeededForThisDish.indexOf(thisIngredient) != -1) {
                // alert(thisIngredient + " is an ingredient in " + allDishes[eachDish][0] + ", which calls for " + allIngredientsNeededForThisDish + ".");
                // yes, this dish has this ingredient, but have all the other ingredients been checked off as well?
                for (var everyOtherIngredient = 0; everyOtherIngredient < allIngredientsNeededForThisDish.length; everyOtherIngredient++) {
                    if (selectedIngredients.indexOf(allIngredientsNeededForThisDish[everyOtherIngredient]) == -1) {
                        allIngredientsAreAvailable = false;
                        break;
                    }
                }
                if (allIngredientsAreAvailable == true) {
                    // if the dish isn't already in the list, add it:
                    var thisDish = allDishes[eachDish][0];
                    if (dishesThatCanBeMade.indexOf(thisDish) == -1) {
                        dishesThatCanBeMade.push(thisDish);
                    }
                }
            }
        }
    }
    var theResults = "With the ingredients available to you:<br>";
    theResults += selectedIngredients.join(", ");
    theResults += "<br><br>you can prepare the following dishes:<br>";
    theResults += dishesThatCanBeMade.join(", ");
    document.getElementById("result").innerHTML = theResults;
}
于 2013-10-20T18:13:33.070 回答