Question

我有三个盒子（box1，box2，box3）。 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/

Answer 1

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

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

Answer 2

如果您可以将一些属性添加到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 + '.')
});

取决于单击另一个元素来替换div的内容（小提琴示例）

2 个答案: