Форум

drakulawz · #1 (**permalink**) 13.08.2018, 13:02

Здравствуйте!
Учу jQuery по учебнику. Сам учебник не плохой и, я бы сказал, очень хорошо сделан. Просто я, наверное, не внимательный...
В общем, есть такой скрипт:

$(document).ready(function () {
    var v = f;
    $('button #vegOn').click(function () {
        if (v == false) {
            $f = $(".fish").parent().parent().detach();
            $m = $('.meat').detach();
            $('.hamburger').replaceWith('<li class="portobello"><em>Portobello Mushroom</em></li>');
            $('.meat').after('<li class="tofu"><em>Tofu</em></li>');
            $('.tofu').parent().parent().addClass('veg_leaf');
            v = true;
        }
    });
    $('button #restorMe').click(function () {
        if (v == true) {
            $('.menu_entrees li').first().before($f);
            $('.portobello').replaceWith('<li class="hamburger">hamburger</li>');
            $('.tofu').each(function (i) {
                $(this).after($m[i]);
            });
            $('.tofu').remove();
            v = false;
        }
    });
});

Он должен, при нажатии кнопки, удалять/заменять некоторые элементы DOMа и, при нажатии другой кнопки, возвращать их. Судя по всему я что-то где-то не дообъявлял... Рассуждать особо не буду так как уже всё, что в моих силах, я проверил и это не помогло. Надеюсь на помощь знающих людей.

ksa · #2 (**permalink**) 13.08.2018, 13:12

Сообщение от drakulawz

Учу jQuery по учебнику.

Начинай делать полные тестовые примеры.

drakulawz · #3 (**permalink**) 13.08.2018, 13:16

Сообщение от ksa

Начинай делать полные тестовые примеры.

Не совсем понял, о чём речь?

j0hnik · #4 (**permalink**) 13.08.2018, 13:18

drakulawz,
HTML где?

ksa · #5 (**permalink**) 13.08.2018, 13:21

Сообщение от drakulawz

Не совсем понял, о чём речь?

Вот полный тестовый пример.

Получить последний выбранный в select multiple

drakulawz · #6 (**permalink**) 13.08.2018, 13:22

Хотел добавить архив со всеми файлами но пишет, что не верный файл, такое же пишет при прикреплении файлов по одному, сейчас добавлю как есть:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="style/clearfix.css">
    <link rel="stylesheet" href="style/style.css">
    <script src="script/jquery-3.3.1.js"></script>
    <script src="script/script.js"></script>
</head>
<body>
    <div id="menu_wraper">
        <div id="topper">
            <h2>Our Menu</h2>
            <ul>
                <li class="nav"><button id="vegOn">Go Vegetarian</button></li>
                <li class="nav"><button id="restorMe">Restore menu</button></li>
            </ul>
        </div>
        <h4>Dinner Entrees</h4>
        <div class="left_col">
            <ul class="menu_entrees">
                <li>
                    <p>Thai-style Halibut</p>
                    <ul class="menu_list">
                        <li>coconut milk</li>
                        <li class="fish">pan-fried halibut</li>
                        <li>early autumn vegetables</li>
                        <li>Thai spices</li>
                    </ul>
                </li>
                <li>
                    <p>Braised Delight</p>
                    <ul class="menu_list">
                        <li class="meat">lamb shoulder</li>
                        <li>cippolini onions</li>
                        <li>carrots</li>
                        <li>baby turnip</li>
                        <li>braising jus</li>
                    </ul>
                </li>
                <li>
                    <p>House Grilled Panini</p>
                    <ul class="menu_list">
                        <li class="meat">prosciutto</li>
                        <li>provolone</li>
                        <li>avocado</li>
                        <li>sourdough roll</li>
                    </ul>
                </li>
                <li><p>House Slider</p>
                    <ul class="menu_list">
                        <li>eggplant</li>
                        <li>zucchini</li>
                        <li class="hamburger">hamburger</li>
                        <li>balsamic vinegar</li>
                        <li>onion</li>
                        <li>carrots</li>
                        <li>multigrain roll</li>
                        <li>goat cheese</li>
                    </ul>
                </li>
                <li>
                    <p>Southwest Slider</p>
                    <ul class="menu_list">
                        <li>whole chiles</li>
                        <li class="hamburger">hamburger</li>
                        <li>pepperjack cheese</li>
                        <li>multigrain roll</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right_col">
            <ul class="menu_entrees">
                <li>
                    <p>Frittata</p>
                    <ul class="menu_list">
                        <li class="meat">eggs</li>
                        <li>Asiago cheese</li>
                        <li>potatoes</li>
                    </ul>
                </li>
                <li>
                    <p>Coconut Soup</p>
                    <ul class="menu_list">
                        <li>coconut milk</li>
                        <li class="meat">chicken</li>
                        <li>vegetable broth</li>
                    </ul>
                </li>
                <li>
                    <p>Soup Du Jour</p>
                    <ul class="menu_list">
                        <li class="meat">grilled steak</li>
                        <li>mushrooms</li>
                        <li>vegetables</li>
                        <li>vegetable broth</li>
                    </ul>
                </li>
                <li>
                    <p>Hot and Sour Soup</p>
                    <ul class="menu_list">
                        <li class="meat">roasted pork</li>
                        <li>carrots</li>
                        <li>Chinese mushrooms</li>
                        <li>chili</li>
                        <li>vegetable broth </li>
                    </ul>
                </li>
                <li>
                    <p>Avocado Rolls</p>
                    <ul class="menu_list">
                        <li>avocado</li>
                        <li>whole chiles</li>
                        <li>sweet red peppers</li>
                        <li>ginger sauce</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

ksa · #7 (**permalink**) 13.08.2018, 13:24

Сообщение от drakulawz

Хотел добавить архив со всеми файлами

Тестовый пример - это минимальный ХТМЛ и скрипт, иллюстрирующий проблему.
А не вся твоя страница целиком.

drakulawz · #8 (**permalink**) 13.08.2018, 13:26

Сообщение от ksa

Вот полный тестовый пример.

Получить последний выбранный в select multiple

Понял - переделал...

Сообщение от ksa

Тестовый пример - это минимальный ХТМЛ и скрипт, иллюстрирующий проблему.
А не вся твоя страница целиком.

Так, а как же понять какой "кусок" кода мне показать, если я не знаю в чём ошибка?

ksa · #9 (**permalink**) 13.08.2018, 13:30

Сообщение от drakulawz

а как же понять какой "кусок" кода мне показать, если я не знаю в чём ошибка?

В этом и есть мастерство тестирования, которым нужно тебе овладеть.

Все сложное начинается с простого.
Если сделал простое - начинай его усложнять.

Иначе придется искать экстрасенсов или платить деньги за работу с твоим говнокодом.

рони · #10 (**permalink**) 13.08.2018, 14:14

drakulawz,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
$(function () {
    $('#vegOn').click(function () {
            $('.hamburger').replaceWith('<li class="portobello"><em>Portobello Mushroom</em></li>');
            $('.meat').each(function() {
            var tofu = $('<li class="tofu"><em>Tofu</em></li>');
            tofu.data('meat', $(this))
            tofu.after(this);
            $('.tofu').parent().parent().addClass('veg_leaf');
            $(this).remove();
            });
            $(".fish").parent().parent().hide();

      });
    $('#restorMe').click(function () {
            $('.portobello').replaceWith('<li class="hamburger">hamburger</li>');
            $('.tofu').each(function () {
            $(this).data('meat').after(this);
            $(this).parent().parent().removeClass('veg_leaf');
            $(this).remove();
            });
            $(".fish").parent().parent().show();
    });
});



  </script>

</head>
<body>
    <div id="menu_wraper">
        <div id="topper">
            <h2>Our Menu</h2>
            <ul>
                <li class="nav"><button id="vegOn">Go Vegetarian</button></li>
                <li class="nav"><button id="restorMe">Restore menu</button></li>
            </ul>
        </div>
        <h4>Dinner Entrees</h4>
        <div class="left_col">
            <ul class="menu_entrees">
                <li>
                    <p>Thai-style Halibut</p>
                    <ul class="menu_list">
                        <li>coconut milk</li>
                        <li class="fish">pan-fried halibut</li>
                        <li>early autumn vegetables</li>
                        <li>Thai spices</li>
                    </ul>
                </li>
                <li>
                    <p>Braised Delight</p>
                    <ul class="menu_list">
                        <li class="meat">lamb shoulder</li>
                        <li>cippolini onions</li>
                        <li>carrots</li>
                        <li>baby turnip</li>
                        <li>braising jus</li>
                    </ul>
                </li>
                <li>
                    <p>House Grilled Panini</p>
                    <ul class="menu_list">
                        <li class="meat">prosciutto</li>
                        <li>provolone</li>
                        <li>avocado</li>
                        <li>sourdough roll</li>
                    </ul>
                </li>
                <li><p>House Slider</p>
                    <ul class="menu_list">
                        <li>eggplant</li>
                        <li>zucchini</li>
                        <li class="hamburger">hamburger</li>
                        <li>balsamic vinegar</li>
                        <li>onion</li>
                        <li>carrots</li>
                        <li>multigrain roll</li>
                        <li>goat cheese</li>
                    </ul>
                </li>
                <li>
                    <p>Southwest Slider</p>
                    <ul class="menu_list">
                        <li>whole chiles</li>
                        <li class="hamburger">hamburger</li>
                        <li>pepperjack cheese</li>
                        <li>multigrain roll</li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right_col">
            <ul class="menu_entrees">
                <li>
                    <p>Frittata</p>
                    <ul class="menu_list">
                        <li class="meat">eggs</li>
                        <li>Asiago cheese</li>
                        <li>potatoes</li>
                    </ul>
                </li>
                <li>
                    <p>Coconut Soup</p>
                    <ul class="menu_list">
                        <li>coconut milk</li>
                        <li class="meat">chicken</li>
                        <li>vegetable broth</li>
                    </ul>
                </li>
                <li>
                    <p>Soup Du Jour</p>
                    <ul class="menu_list">
                        <li class="meat">grilled steak</li>
                        <li>mushrooms</li>
                        <li>vegetables</li>
                        <li>vegetable broth</li>
                    </ul>
                </li>
                <li>
                    <p>Hot and Sour Soup</p>
                    <ul class="menu_list">
                        <li class="meat">roasted pork</li>
                        <li>carrots</li>
                        <li>Chinese mushrooms</li>
                        <li>chili</li>
                        <li>vegetable broth </li>
                    </ul>
                </li>
                <li>
                    <p>Avocado Rolls</p>
                    <ul class="menu_list">
                        <li>avocado</li>
                        <li>whole chiles</li>
                        <li>sweet red peppers</li>
                        <li>ginger sauce</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript