Question

我正在为朋友创建一个博客，我正在尝试做一些非常简单的事情。

就像用户在每张图片上鼠标悬停时更改左侧文字一样简单。

我在其他主题上找到了一些代码，但这似乎不是最好的方法，因为我一遍又一遍地重复相同的功能，正如您在源代码中看到的那样。

它完美无缺，但是有人可以帮助我以正确的方式做到这一点，所以我们没有可怕的丑陋代码吗？

我是这个主题的新手。

html代码：

    <ul>

        <li class="ingredientes_title">busca por<br/><span id="old">ingrediente</span></li>

        <li><a href="/" id="laticinios"><img src="i/ingredientes_02.gif" /></a></li>

        <li>
            <ul>
                <li><a href="/" id="paes_e_massas"><img src="i/ingredientes_03.gif" /></a><a href="/" id="frutas"><img src="i/ingredientes_04.gif" /></a></li>
                <li><a href="/" id="doces"><img src="i/ingredientes_15.gif" /></a><a href="/" id="castanhas_frutossecos"><img src="i/ingredientes_16.gif" /></a></li>
            </ul>
        </li>

        <li><a href="/" id="raizes_tuberculos"><img src="i/ingredientes_05.gif" /></a></li>

        <li>
            <ul>
                <li><a href="/" id="ovos"><img src="i/ingredientes_06.gif" /></a><a href="/" id="flores_ervas"><img src="i/ingredientes_07.gif" /></a></li>
                <li><a href="/" id="embutidos"><img src="i/ingredientes_12.gif" /></a><a href="/" id="cereais_graos"><img src="i/ingredientes_13.gif" /></a></li>
            </ul>
        </li>

        <li>
            <ul>
                <li><a href="/" id="aves"><img src="i/ingredientes_08a.gif" /></a><a href="/" id="carnes"><img src="i/ingredientes_08b.gif" /></a></li>
                <li><a href="/" id="peixes"><img src="i/ingredientes_14.gif" /></a></li>
            </ul>
        </li>

        <li><a href="/" id="vegetais"><img src="i/ingredientes_09.gif" /></a></li>

        <li>
            <ul>
                <li><a href="/" id="legumes"><img src="i/ingredientes_10.gif" /></a></li>
                <li><a href="/" id="especiarias"><img src="i/ingredientes_11.gif" /></a></li>
            </ul>
        </li>

    </ul>

</div><!-- /ingredientes -->

js可怕的代码：

$(document).ready(function()
    {
    $("#laticinios").hover(
      function () {
         $("#old").text("LaticÃnios");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#paes_e_massas").hover(
      function () {
         $("#old").text("PÃ£es e Massas");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    }); 

$(document).ready(function()
    {
    $("#frutas").hover(
      function () {
         $("#old").text("Frutas");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#doces").hover(
      function () {
         $("#old").text("Doces");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#castanhas_frutossecos").hover(
      function () {
         $("#old").text("Castanhas e frutos secos");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#raizes_tuberculos").hover(
      function () {
         $("#old").text("RaÃzes e tubÃ©rculos");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#ovos").hover(
      function () {
         $("#old").text("Ovos");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#flores_ervas").hover(
      function () {
         $("#old").text("Flores e ervas");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#embutidos").hover(
      function () {
         $("#old").text("Embutidos");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#cereais_graos").hover(
      function () {
         $("#old").text("Cereais e grÃ£os");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#aves").hover(
      function () {
         $("#old").text("Aves");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#carnes").hover(
      function () {
         $("#old").text("Carnes");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#peixes").hover(
      function () {
         $("#old").text("Peixes");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#vegetais").hover(
      function () {
         $("#old").text("Vegetais");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#legumes").hover(
      function () {
         $("#old").text("Legumes");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

$(document).ready(function()
    {
    $("#especiarias").hover(
      function () {
         $("#old").text("Especiarias");
        },
        function () {
         $("#old").text("ingrediente");
        }
        );
    });

Answer 1

而不是使用jquery选择具有特定id的每个图像。我会在每个图像上设置相同的css类，并将其用作选择器来应用您的悬停功能。

在该功能中，您可以使用一系列ID来编程，以便为每个图像关联特定文本。

这样你的页面中只有一个javascript函数。

Answer 2

是的，这是非常丑陋的代码。：）

首先，您只需要包含$(document).ready(function(){ ... });一次。将所有内容放入其中，放置...。

其次，关于jQuery的巧妙之处在于，只要他们共享一些独特的元素，你就可以很容易地“获取”许多元素 - 比如它们都有相同的类，或者都是{{1} } elements。

另外，请避免在HTML中添加重音字母;改为编写HTML实体名称，因为否则它们将无法在许多浏览器上正确显示。例如，写<img>而不是“ñ”。（见这里：http://www.w3schools.com/tags/ref_entities.asp）

这是一个简单的解决方法：

在您的HTML中，将每个ñ一个“标题”属性与您希望“busca por”在img鼠标移开时说出的任何内容相同。例如：

img

用以下代码替换您的JS / jQuery代码：

<li><a href="/" id="laticinios"><img src="i/ingredientes_02.gif" title="latici&ntilde;os" /></a></li>

我认为这样可行。

Jquery悬停功能 - 如何让这个简单？

2 个答案: