Question

我有一个可变大小的字符串数组。

对于数组中的每个元素，我希望能够单独修改它们包含的文本的大小。

现在它只适用于第一句话。

我会像

那样

    #trim <?= $i ?> {}

能够控制每个句子但是这个工作。

这样做的最佳方式是什么？

我的代码如下：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


    <style>
    #trim {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       position: relative;
       padding-left:10px;
       width: 50px;
      }
     #trim:after {
       content: '+';
       right: 0;
       position: absolute;
     }
     #trim.full {
      width: auto;
      height: auto;
      white-space: normal;
    }
    #trim.full:after {
      display: none;
    }
    </style>


    <?php

        $array=['first sentence','sencond sentence','third sentence'];

        $i=0;

        foreach ($array as $answer)
        {  
        ?>

         <p id="trim"><?= $answer ?></p>

     <?php
     $i++;
    }
    ?>

    <script>
    $('#trim').click(function() {
    $(this).toggleClass('full');
    });
    </script>

Answer 1

ID必须是唯一的。

您的代码无效的原因。

如果您使用id选择器（例如$('#trim')）选择具有ID的元素，则只会选择第一个元素。

注意：使用类而不是使用相同的id总是更好。

使用课程

进行演示

$('.trim').click(function() {
    $(this).toggleClass('full');
});

.full{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="trim">Para 1</p>
<p class="trim">Para 2</p>
<p class="trim">Para 3</p>
<p class="trim">Para 4</p>

如果您使用具有相同元素的id，则可以使用属性选择器。（只是为了知道。）

$('[id="trim"]').click(function() {
    $(this).toggleClass('full');
});

工作演示

$('[id="trim"]').click(function() {
    $(this).toggleClass('full');
});

.full{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="trim">Para 1</p>
<p id="trim">Para 2</p>
<p id="trim">Para 3</p>
<p id="trim">Para 4</p>

Answer 2

Id是唯一的，您可以使用它们一次。

在这里，我使用你的$ i给每个ID一个不同的名字。

 <p id="trim$i"><?= $answer ?></p>

将CSS应用于使用PHP定义的许多div

2 个答案: