文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >根据另一个div单击更改div中的元素。

问根据另一个div单击更改div中的元素。
EN

Stack Overflow用户
提问于 2018-12-12 11:25:53
回答 4查看 1.1K关注 0票数 2

我有一份有三项内容的“名单”。默认情况下，每个列表都显示一个图像和文本。

当单击其中一个div时，我希望将其内容显示在另一个div中(以及更多信息)。

  • 第一个clickable-li内容将始终显示在辅助div中。在内容上，我指的是1。它是图像2。它是标题(h3)和3。它是textm，现在是“这是图标1的示例文本”。
  • 从那里，任何其他点击任何clickable-li，它将显示其信息相应。

当前方法：

​

代码语言：javascript
复制
$('#icon-1').click(function() {
  $('image_col-2-wrapper h3').html('icon 1');
  $('image_col-2-wrapper p').html('this is sample text for icon 1');
});

$('#icon-2').click(function() {
  $('image_col-2-wrapper h3').html('icon 2');
  $('image_col-2-wrapper p').html('this is sample text for icon 2');
});

$('#icon-3').click(function() {
  $('image_col-2-wrapper h3').html('icon 3');
  $('image_col-2-wrapper p').html('this is sample text for icon 3');
});
代码语言：javascript
复制
img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}
代码语言：javascript
复制
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

​

javascript
jquery
html
css
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-12-12 12:20:40

正如ssamuel所说，您的问题是类名中缺少的.。

⋅⋅⋅

不管怎样，…

您可以增强代码，使其只有一个JavaScript函数。并将所有内容保存在HTML中。

新片段(使用隐藏的div元素作为html容器)

​

代码语言：javascript
复制
$('.clickable-li').click(function(title, text) {
  $('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
  $('.image_col-2-wrapper p').html($(this).find(".mytext").html());
});
代码语言：javascript
复制
img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

.mytext {
  display: none;
}
代码语言：javascript
复制
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">

  <!-- LEFT -->
  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1" mytitle="Icon 1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
      <div class="mytext">
        <p>this is sample text for icon 1</p>
      </div>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2" mytitle="Icon 2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
      <div class="mytext">
        <p>this is sample text for icon 2</p>
        <h4>But this one also has a header</h4>
        <p>and more text!</p>
      </div>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3" mytitle="Icon 3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
      <div class="mytext">this is sample text for icon 3</div>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>
</div>

​

⋅⋅⋅

旧片段(使用自定义属性)

​

代码语言：javascript
复制
$('.clickable-li').click(function(title, text) {
  $('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
  $('.image_col-2-wrapper p').html($(this).attr("mytext"));
});
代码语言：javascript
复制
img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}
代码语言：javascript
复制
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">

  <!-- LEFT -->
  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1" mytitle="Icon 1" mytext="this is sample text for icon 1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2" mytitle="Icon 2" mytext="this is sample text for icon 2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3" mytitle="Icon 3" mytext="this is sample text for icon 3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

</div>

​

票数 1
EN

Stack Overflow用户

发布于 2018-12-12 11:33:43

你得用“。”以类名为$('.classname').click()...that的点是唯一的问题。

​

代码语言：javascript
复制
$('#icon-1').click(function() {
  $('.image_col-2-wrapper h3').html('icon 1');
  $('.image_col-2-wrapper p').html('this is sample text for icon 1');
});

$('#icon-2').click(function() {
  $('.image_col-2-wrapper h3').html('icon 2');
  $('.image_col-2-wrapper p').html('this is sample text for icon 2');
});

$('#icon-3').click(function() {
  $('.image_col-2-wrapper h3').html('icon 3');
  $('.image_col-2-wrapper p').html('this is sample text for icon 3');
});
代码语言：javascript
复制
img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}
代码语言：javascript
复制
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

​

票数 1
EN

Stack Overflow用户

发布于 2018-12-12 11:35:26

不需要使用单独的单击句柄。只要用通配符点击一下就可以做到这一点。使用id上的split获取所需的值，并将其附加到消息中。类使用.，id使用#。

​

代码语言：javascript
复制
$('[id*="icon"]').click(function(i, ele) {
  var id = $(this).attr('id').split('-')[1];
  $('.image_col-2-wrapper h3').html('icon ' + id);
  $('.image_col-2-wrapper p').html('this is sample text for icon ' + id);
});
代码语言：javascript
复制
img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53742017

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档