根据另一个div更改div中的元素，点击

时间：2018-12-12 11:25:54

标签： javascript jquery html css

我有一个包含三个项目的“列表”。默认情况下，每个列表都显示一个图像和文本。

当单击这些div之一时，我希望其内容显示在另一个div中（以及更多信息）。

  • 第一个clickable-li内容将始终显示在辅助div中。就内容而言，我指的是1.它是图像2.它是标头（h3）和3.这是textm，现在是“这是图标1的示例文本”。
  • 从那里，任何其他人单击任何clickable-li，它将相应地显示其信息。

当前方法： 

$('#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');
});
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%;
}
<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>

4 个答案:

答案 0 :(得分：1)

您必须使用'。'类名称为$('.classname').click()的点...这是唯一的问题

$('#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');
});
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%;
}
<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 :(得分：1)

如ssamuel所说，您的问题是班级名称中缺少.。

⋅ ⋅ ⋅

反正...

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

新代码段 （使用隐藏的div元素作为html容器） 

$('.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());
});
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;
}
<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>

⋅ ⋅ ⋅

旧代码段 （使用自定义属性） 

$('.clickable-li').click(function(title, text) {
  $('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
  $('.image_col-2-wrapper p').html($(this).attr("mytext"));
});
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%;
}
<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>

答案 2 :(得分：0)

无需使用单独的单击手柄。只需单击一下通配符即可。在ID上使用split以获取所需的值并将其附加在您的消息中。将.用于类，将#用于ID。

$('[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);
});
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%;
}
<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>

答案 3 :(得分：0)

$('.clickable-li').click(function(i, elem) {
  var id = $(this).attr('id').split('-')[1];
   $('.image_col-2-wrapper h3').html('icon ' + id);
  $('.image_col-2-wrapper p').html('Text for icon ' + id);
  var url=$(this).find("img").attr("src");
  $(".image_col-2-wrapper img").attr('src',url);
});
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%;
}
<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="https://img.icons8.com/metro/1600/3-circle.png">
      <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>

在通用类clickable-li上添加click事件。

相关问题
最新问题