Question

每次点击foo颜色框时，是否可以在容器div中显示图像？若有，有人可以告诉我如何。我需要知道javascript会是什么，我不知道如何使用javascript来完成这项工作

＆＃13;

 .foo {
      float: left;
      width: 20px;
      height: 20px;
      margin: 5px;
      border: 1px solid rgba(0, 0, 0, .2);
    }
    .white {
      background: #FFFFFF;
    }
    .yellow {
      background: #FAFF38;
    }
    .orange {
      background: #FFA200;
    }

    .red {
      background: #FF0000;
    }
    .dorange {
      background: #FF5500;
    }
    .lgreen {
      background: #80FF00;
    }

    .green {
      background: #45C731;
    }

    .turk {
      background: #17DDBC;
    }
    .lblue {
      background: #00A2FF;
    }.blue {
      background: #1713F6;
    }.purple {
      background: #AB09D3;
    }.black {
      background: #000000;
    }

＆＃13;

<div id="colour">
                <div class="foo white" data-image="http://mebe.co/mustang">
                </div>
                <div class="foo black" data-image="http://mebe.co/ford">
                </div>
                <div class="foo yellow" data-image="http://mebe.co/f150">
                </div>
                <div class="foo orange" data-image="http://mebe.co/yukon">
                </div>
                <div class="foo red" data-image="http://mebe.co/370z">
                </div>
                <div class="foo dorange" data-image="http://mebe.co/gtr">
                </div>
                <div class="foo lgreen" data-image="http://mebe.co/sentra">
                </div>
                <div class="foo green" data-image="http://mebe.co/dodge">
                </div>
                <div class="foo turk" data-image="http://mebe.co/civic">
                </div>
                <div class="foo lblue" data-image="http://mebe.co/gmc">
                </div>
                <div class="foo blue" data-image="http://mebe.co/bmw">
                </div>
                <div class="foo purple" data-image="http://mebe.co/sentra">
                </div>
            </div>

<div class="container" style="background-color:lightgrey; border-width:1px; border-style:solid; width:500px; height:500px;  z-index:1; visibility:; float: left; visibility:; background-color: lightgrey;visibility:;"></div>

＆＃13;

Answer 1

您可以这样，只需更新Template.checks.helpers({ 'values': function() { let result = []; let checks = Session.get('items'); checks.forEach((item) => { let url = item.replace(/[^0-9a-zA-Z]/g, ''); $.get(url + '.giiif') //<----- files do not exist .done(function() { console.log(`exists`); //<----- yet this prints out }).fail(function() { console.log(`does not exist`); //<--- expected this instead }); result.push({ label: item, image: url }); }); return result; } });。

data-image

$(document).ready(function() {
  $('.foo.active').each(function(){
  	$('.container img').attr('src', $(this).data("image"));
  });
  $('.foo').on('click',function(){
  	$('.container img').attr('src', '');
  	$('.container img').attr('src', $(this).data("image"));
  });
});

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  cursor: pointer;
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}
.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}
.green {
  background: #45C731;
}
.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}
.blue {
  background: #1713F6;
}
.purple {
  background: #AB09D3;
}
.black {
  background: #000000;
}
.container {
  border-width: 1px;
  border-style: solid;
  width: 500px;
  z-index: 1;
  float: left;
}
.container img{
  width: 100%;
}

使用foo颜色框更改图像

1 个答案: