Question

我是新手，我有两个切换（很快就会有4个切换）。当它们分开时它们完美地工作，但是一旦我把它们放在一个中，而另一个只有一个切换工作。

经过一些研究后，我发现必须对我的javascript进行调整，但无法在网络上的任何地方找到如何做到这一点。我找到了这个jQuery代码，这正是我想要做的。但是因为我正在使用一个字符串（打印出来自数据库的echo）来创建我的HTML，所以jQuery似乎不起作用。因此我使用Javascript，我想知道在Javascript中有类似的东西。

http://jsfiddle.net/ufC5B/2/

我的代码

             //toggle and change bg colour
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if (e.style.display == "block" || e.style.display == "") {
                e.style.display = "none";

            } else {
                e.style.display = "block";
                text.innerHTML = "-";

            }
        }

PHP

  echo("<button id='onclick' onclick='toggle_visibility(\"tog$i\")'> " . $_SESSION['Food_Cat_name'] . " </button>");

        echo("<div id='first_product'>");

        echo("<div id='tog$i' class ='hidden'>");

        echo("<div id='red_head'>");
        echo("<p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>");
        echo("</div>");

        echo("<p >Menu Item</p>");

        //echo("<input type='button' id='new_item' value='Add new item to " . $_SESSION['Food_Cat_name'] . "' name='new_item'>");
        echo("<button id='new_item$i' onclick='toggle_visibility(\"p_form$i\")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>");

        echo("<div id='p_form$i' class ='hidden'>");

        echo("<input type='text' id='prod_name' name='prod_name' value=''>");
        echo("<br>");
        echo("<textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>");
        echo("<br>");
        echo("<input type='text' id='price' name='price' value=''>");
        echo("</div>");

        echo("</form>");

渲染

＆＃13;

           //toggle and change bg colour
            function toggle_visibility(id) {
                var e = document.getElementById(id);
             
                if (e.style.display == "block" || e.style.display == "") {
                    e.style.display = "none";
                 
                } else {
                    e.style.display = "block";
                    text.innerHTML = "-";

                }
            }

＆＃13;

.hidden {
    display: none; 
}

＆＃13;

           <button id='onclick' onclick='toggle_visibility("tog")'> " . $_SESSION['Food_Cat_name'] . " </button>

            <div id='first_product'>");

            <div id='tog' class ='hidden'>

            <div id='red_head'>
            <p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>
            </div>

            <p >Menu Item</p>

           
            <button id='new_item' onclick='toggle_visibility("p_form")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>
            
            <div id='p_form' class ='hidden'>
        
            <input type='text' id='prod_name' name='prod_name' value=''>
            <br>
            <textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>
            <br>
            <input type='text' id='price' name='price' value=''>
            </div>
          
            </form>

＆＃13;

Answer 1

我注意到你的js功能，问题出在'text.innerHTML =“ - ”;'行。请删除它。如果你使用的是jquery，你可以通过以下方式实现你的功能只是给代码$（“＃”+ id）.toggle（）而不是

var e = document.getElementById(id);
            if (e.style.display == "block" || e.style.display == "") {
                e.style.display = "none";

            } else {
                e.style.display = "block";
                text.innerHTML = "-";

            }

JAVASCRIPT：在Toggle中切换不工作的问题

1 个答案: