根据单击另一个元素替换 div 的内容（小提琴示例）答案

【问题标题】：Replacing the content of a div depending on a click on another element (fiddle example)根据单击另一个元素替换 div 的内容（小提琴示例）
【发布时间】：2019-04-21 19:23:48
【问题描述】：

我有三个盒子（盒子1、盒子2、盒子3）。 Box2 和 box3 是相同的，它们只是在单击（选择）时显示一个边框。一次只能选择一项。到目前为止我得到了这个。

现在我希望在第一个框中出现一个文本，上面写着=“您点击了...”，然后应该写成“我是框 1”或“我是框 2”。

我知道这可能是一件简单的事情，但我就是不明白，我现在尝试了很多东西。

HTML：

<div class="showbox">

<a>
When I cklick on one of the yellow boxes, I would like the content of this element to be changed. The result should be "Okay, you chose Box 1 (or Box 2, depens on what I clicked on).

</div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

CSS：

.showbox{
 height: 14rem;
 width: 14rem;
 background-color: grey;
 float:left;
}
.box{
  height: 4.5rem;
  width: 4.5rem;
  background-color: yellow;
  margin: 1rem;
}
#box1, #box2{
  float: left;
}
 .borderClass{  
   border-style: solid;
   border-width: 2px 2px 2px 2px; 
 }

JS：

var box1 = "I am Box 1";

$('.box').click( function(){
  if ( $(this).hasClass('borderClass') ) {
    $(this).removeClass('borderClass');
  } else {
    $('.box').removeClass('borderClass');
    $(this).addClass('borderClass');    
  }
 });

请看这里：

https://jsfiddle.net/j7rdtqvc/

【问题讨论】：

标签： jquery

【解决方案1】：

如果你可以为你的 div 元素添加一些属性，那么你就去吧：

<div class="box" id="box1" data-id="1"></div>
<div class="box" id="box2" data-id="2"></div>

脚本应该是：

$('.box').click( function(){
    if ( $(this).hasClass('borderClass') ) {
        $(this).removeClass('borderClass');
    } else {
        $('.box').removeClass('borderClass');
        $(this).addClass('borderClass');
    }

    if ($(this).data('id') == 1) {
        $('.showbox').html('Okay, you chose Box 1.')
    } else {
        $('.showbox').html('Okay, you chose Box 2.')
    }
});

但是如果你不能添加任何其他属性，这是这样的：

$('.box').click( function(){
    if ( $(this).hasClass('borderClass') ) {
        $(this).removeClass('borderClass');
    } else {
        $('.box').removeClass('borderClass');
        $(this).addClass('borderClass');
    }

    var id = $(this).attr('id').split('box')[1];
    $('.showbox').html('Okay, you chose Box ' + id + '.')
});

【讨论】：

【解决方案2】：

您可以尝试以下代码，我只是根据点击框更改文本。

$('.box').click( function(){
   var box_number = 0;
     if( $(this).attr('id')== 'box1' ) {
    box_number = 1;
   }else if(  $(this).attr('id')== 'box2'  ){
    box_number = 2;
   }
   $(this).html('<p>Okay, you chose Box '+box_number+'</p>');

   if ( $(this).hasClass('borderClass') ) {
      $(this).removeClass('borderClass');
   } else {
      $('.box').removeClass('borderClass');
      $(this).addClass('borderClass');    
   }
});

【讨论】：