Question

我想使用商店名称的第一个字母设置商店的个人资料图片。

这是我的刀片

<?php
        $smestable = DB::table('sme_table')->get(); 
                foreach ($smestable as $s) {
                        $name   = $s->store_name;
                ?>

      <div class="item">
        <div class="col-xs-12 col-sm-6 col-md-2">
          <span id="storename">{!! $name !!}</span>
          <div id="profile"></div>
          <h4 class="text-center">{!! $name !!}</h4>
          <h5 class="text-center">4000,00 RSD</h5>
        </div>
      </div>

      <?php } ?>

这是我的javascript

 <script type="text/javascript">
   $(document).ready(function(){
  var storename = $('#storename').text();
  var intials = $('#storename').text().charAt(0);
  var profile = $('#profile').text(intials);
});
  </script>

这是我的css

#profile {
width: 150px;
 height: 150px;
border-radius: 50%;
background: #512DA8;
font-size: 35px;
color: #fff;
text-align: center;
line-height: 150px;
margin: 20px 0;
}

我想使用商店名称的第一个字母设置每个商店的个人资料图片，但只有一个给出。这是结果。

heres my result

Answer 1

如果您正在使用Blade，请执行此操作。

@foreach + {{ }}代替{!! !!}

@foreach ($smestable as $sme)
    <div class="item">
        <div class="col-xs-12 col-sm-6 col-md-2">
            <span id="storename">{{ $sme->store_name }}</span>
            <div id="profile">{{ substr($sme->store_name, 0, 1) }}</div>
            <h4 class="text-center">{{ $sme->store_name }}</h4>
            <h5 class="text-center">4000,00 RSD</h5>
        </div>
    </div>
@endforeach

Answer 2

您可以更改代码的以下行：

<div id="profile"></div>

到

<div id="profile"><?php echo substr ($name , 0 ,1 ); ?></div>

这将从名称中选择第一个字符并在渲染时显示它，因此您不需要在JS中执行此操作。

如何获取名称的第一个字母并将其用作商店的个人资料

2 个答案: