我正在使用某种电子商店模板,我只能使用Jquery和JS操作一些东西。
问题1:
我想给第一个包含内容“Hello and Welcome!”的方框。和一些背景 - 图像。问题是,这个盒子有一些填充,我需要将背景设置为这个Div的父“内包装”。
有没有办法选择第一个“内包装”并检查内容是否是“你好,欢迎!”在内容框中?
问题2:
方框1 - 方框4需要另一个背景图像。
我知道一些基本的Jquery的东西,但我很难与那些先进的东西。经过4个小时的反复试验,我不得不问你们。
我希望你能帮助我,并提前感谢!
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>
答案 0 :(得分:0)
您可以添加额外的课程并检查该课程,而不是检查文字。或者您可以为第一个$('.content-box')
.inner-wrapper
提供单独的背景图片
$(function(){
$('.content-box').each(function(){
if($(this).hasClass('firstBox')){
$(this).parent().css('background-image', 'url(http://via.placeholder.com/350x150)');
}else{
$(this).parent().css('background-image', 'url(http://via.placeholder.com/150x150)');
}
})
})
.inner-wrapper{
width:100px;
height:100px;
background-size: cover;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="inner-wrapper">
<div class="content-box firstBox">
Hello and Welcome!
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
<img src="" alt="">
</div>
</div>
</div>
<div class="row">
<div class="inner-wrapper">
<div class="content-box">
Box 1
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 2
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 3
</div>
</div>
<div class="inner-wrapper">
<div class="content-box">
Box 4
</div>
</div>
</div>