改变多个div的onclick内容答案

【问题标题】：Change content of multiple div's onclick改变多个div的onclick内容
【发布时间】：2014-04-08 11:14:25
【问题描述】：

我需要一些关于产品切换页面的 JavaScript 方面的帮助。

基本上，我只有一个包含 3 个 div 的页面。

#product-toggle
#product-image
#product-specs

#product-toggle div 有一个包含多个产品链接的菜单。单击每个产品链接时，#product-image 和 #product-specs 内容必须更改为将被点击的实际产品。

我尝试了几个 div 交换脚本，但它们都只改变了 1 个 div，而不是像我这样的 2 个。此外，我不能使用任何将内容文本写入 JS 内部的解决方案。内容必须写在 DIV 中（以便在我将使用的 CMS 中轻松自定义）。

提前致谢！

另外，如果可以避免使用 jQuery，那就太好了。

这是页面的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>
<body>

    <div id="product-image">

        <div id="model-1-img"><img src="link/to/model-1/img.png" /></div>
        <div id="model-2-img"><img src="link/to/model-2/img.png" /></div>
        <div id="model-3-img"><img src="link/to/model-3/img.png" /></div>

    </div>

    <div id="product-toggle">
        <a href="#">Model 1</a> | <a href="#">Model 2</a> | <a href="#">Model 3</a>
    </div>

    <div id="product-specs">

        <div id="model-1-spec">
            <p>Specs of model 1</p>
        </div>

        <div id="model-2-spec">
            <p>Specs of model 2</p>
        </div>

        <div id="model-3-spec">
            <p>Specs of model 3</p>
        </div>

    </div>

</body>
</html>

【问题讨论】：

你用谷歌搜索过吗？并附上你迄今为止尝试过的一些代码 sn-ps？如果没有 jquery，如何解决这个问题？
欢迎来到 StackOverflow。 whathaveyoutried.com?请向我们展示您到目前为止所拥有的。 SO 不是代码编写服务，如果您提供自己工作的证据，您将获得更好的响应。请参阅the Help pages。
@Infinity，在 jQuery 出现之前，我们使用 vanilla javascript 管理得很好
@Infinity 我相信我不需要 jQuery，但如果我这样做，这不是问题。
@freefaller 谢谢。我已经用我的代码的 HTML 更新了这个问题。事实是，我真的不会编写 JS 代码，这就是我真正需要帮助的原因，因为我无法获得我复制的任何脚本来处理 2 个更改内容的 div。这确实对我有用，但正如我所说的只有 1 个 div。 dynamicdrive.com/forums/archive/index.php/t-34902.html

标签： javascript jquery html css

【解决方案1】：

我认为你可以使用它，虽然我没有将它包含在图像中，我相信你可以在查看这个示例后做到这一点。

<div id="product-toggle">
    <h3> Click on any brand to know its specs: </h3>
    <h2 onclick="toggleContent('samsung')" style="color: blue">Samsung</h2>
    <h2 onclick="toggleContent('nokia')" style="color: blue">Nokia</h2>
    <h2 onclick="toggleContent('apple')" style="color: blue">Apple</h2>
</div>

<h3> Product Specifications </h3>
<div id="product-specs" style="color: brown; font-size: 25px"> </div>


  <script>
        var specs = {
            'samsung' : 'S5 is lastest Samsung Phone',
            'apple' : 'iPhone5 is latest Apple Phone',
            'nokia' : 'Nokia has started making Android phone'
        }
        function toggleContent(brand)
        {
            document.getElementById('product-specs').innerHTML = specs[brand];
        }

    </script>

谢谢

【讨论】：

谢谢。我怎样才能改变img？我试过这个： onclick="toggleContent('samsung'+'samsung-img')" 并将 samsung-img 添加到 var 规格列表中。那是行不通的。那么如何一键更改 2 个 div？

【解决方案2】：

您需要为每个链接设置一个onClick-callback。回调查找链接的 id 并执行一些业务逻辑，例如通过 ajax 获取数据。那么你应该使用

var specs = document.getElementById("#divId");

将所有信息写入差异。

这是一项非常基本的任务，您不需要为此提供一些脚本/库

【讨论】：

谢谢，我已经尝试了一些使用 onclick="reveal('model-1-spec');" 找到的 javascript 代码代码，它工作。但仅在 1 个 div 上。我试过对代码做这样的事情，但没有任何运气：onclick="reveal('model-1-spec'+'model-1-img');"

【解决方案3】：

这是修改后的图片切换：

<div id="product-toggle">
    <h3> Click on any brand to know its specs: </h3>
    <h2 onclick="toggleContent('samsung')" style="color: blue">Samsung</h2>
    <h2 onclick="toggleContent('nokia')" style="color: blue">Nokia</h2>
    <h2 onclick="toggleContent('apple')" style="color: blue">Apple</h2>
</div>

<h3> Product Specifications </h3>
<div id="product-specs" style="color: brown; font-size: 25px"> </div>


<img src="" id="product-image">

 <script>
        var specs = {
            'samsung' : {desc: 'S5 is lastest Samsung Phone', src:'bear.png'},
            'apple' : {desc: 'iPhone5 is latest Apple Phone', src:'cat.png'},
            'nokia' : {desc: 'Nokia has started making Android phone', src:'chiken.png'}
        }
        function toggleContent(brand)
        {
            document.getElementById('product-specs').innerHTML = specs[brand].desc;
            document.getElementById('product-image').src = specs[brand].src;
        }

    </script>

【讨论】：