CSS подстановочный знак, не влияющий на стиль

Question

CSS подстановочный знак, не влияющий на стиль

Метод на основе XHR.

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752

    req.onload = function fileLoaded(e)
    {
        // If you require the blob to have correct mime type
        var mime = this.getResponseHeader('content-type');

        callback( new Blob([this.response], {type:mime}) );
    };

    req.send();
}

dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
    console.log( blob );
});

2

javascript jquery html css css-selectors

задан kukkuz 11 March 2019 в 15:15

3 ответа

score 0 · Answer 1

Вы должны использовать * вместо ^. Согласно MDN

[attr^=value] Представляет элементы с именем атрибута attr, значению которого предшествует (предшествует) значение
[attr*=value] Представляет элементы с именем атрибута attr , значение которого содержит хотя бы одно вхождение значения в строке
$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});
[111 ]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

score 0 · Answer 2

^= выбирает элемент с атрибутом class, который начинается с следующей строки. Вы можете использовать селектор *= для выбора класса , который содержит :

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

[ 1111]

Но я бы никогда не полагался на такую конструкцию - вместо этого использовал бы новый класс (скажем, list, основанный на вашей бизнес-логике), а затем вы можете использовать [ 1110] вместо специфичность (обратите внимание, что после точки нет пробела):

$('.box2').addClass(function() {
  // your business logic determining which class to add
  return 'list';
});

.box2.list {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

[ 1124]

0

ответ дан kukkuz 11 March 2019 в 15:15

score 0 · Answer 3

Попробуйте *=. Который ищет совпадение в любом месте значения атрибута класса.

Ваш текущий селектор, ^=, пытается найти соответствие в начале значения атрибута класса.

См .: Селекторы атрибутов - MDN

$('.box2').addClass(function() {
  return 'list_' + $('.box1 li').length;
});

div[class*="list_"] {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="box1">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<div class="box2">text</div>

[1116 ] Как отметили другие в комментариях, селекторы атрибутов могут быть скользкими в зависимости от того, как они реализованы. В этом случае, как упомянул @Pointy, вы можете добавить два класса. Один для подсчета и один для отметки того, что он изменился.

Вы также можете добавить атрибут data- вместо класса. Нечто подобное data-list-count. Тогда ваш селектор будет [data-list-count].

CSS подстановочный знак, не влияющий на стиль

3 ответа

Похожие вопросы: