emilianoD85 Ответов: 1

Скрипт Jquery влияет только на первый DIV на моей странице?

Я новичок в jQuery и, похоже, не могу заставить следующий код работать по своему вкусу:

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $.fn.digits = function(text){
            $(this).text(text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€' );
        };
        var tempText = $.trim($("#price").text());
        tempText = tempText.substr(0, parseInt(tempText.length) );
        $("#price").digits(tempText);
    });
</script>


Он должен конвертировать числа во всех #price divs в разделенные запятыми валютные версии:

1000000 = 1,000,000€

Это прекрасно работает для первого экземпляра #price на странице, но если один и тот же идентификатор появляется более одного раза на одной и той же странице, остальные не форматируются сценарием.

Я обнаружил, что DIV Mus уникален, поэтому я попытался перейти к классам вместо этого (#price to .price), Что делает трюк, но теперь создает новую проблему. Теперь все экземпляры .price показаны в каждом экземпляре .price - если это имеет смысл.

Допустим, у меня есть .цена 3 раза на одной странице:

Пример 1 (.Цена): 200000

Пример 2 (.Цена): 250000

Пример 3 (цена): 300000

Должен показать:

200,000€

250,000€

300,000€

Вместо этого он дает мне:

200,000€ 250,000€ 300,000€

200,000€ 250,000€ 300,000€

200,000€ 250,000€ 300,000€

Почему это так, и как мне это исправить?

Спасибо!

Что я уже пробовал:

<pre><script type="text/javascript">
    jQuery(document).ready(function($) {
        $.fn.digits = function(text){
            $(this).text(text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€' );
        };
        var tempText = $.trim($("#price").text());
        tempText = tempText.substr(0, parseInt(tempText.length) );
        $("#price").digits(tempText);
    });
</script>


и (изменено на классы)

<pre><script type="text/javascript">
    jQuery(document).ready(function($) {
        $.fn.digits = function(text){
            $(this).text(text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€' );
        };
        var tempText = $.trim($(".price").text());
        tempText = tempText.substr(0, parseInt(tempText.length) );
        $(".price").digits(tempText);
    });
</script>

1 Ответов

Рейтинг:
12

F-ES Sitecore

Вы должны использовать классы, а не идентификаторы. Во-вторых, когда вы делаете $(".price"), вы должны помнить, что возвращает несколько элементов, поэтому этот код;

var tempText = $.trim($(".price").text());


объединяет все три значения в одну переменную, это это

$(".price").digits(tempText);


устанавливает все три ценовых дива на один и тот же текст. Вот почему вы получаете все значения, установленные три раза. Код должен быть больше похож на этот;

jQuery(document).ready(function ($) {
    $.fn.digits = function (text) {
        $(this).text(text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€');
    };

    $(".price").each(function () {
        var $div = $(this);
        var tempText = $.trim($div.text());
        tempText = tempText.substr(0, parseInt(tempText.length));
        $div.digits(tempText);
    });
            
});


Выше мы обрабатываем каждый ценовой div отдельно. Этот код ограничен тем фактом, что вы передаете текст для обработки в функции digits. Если вы измените функцию для чтения самого текста вы можете сделать код ближе к тому что вы вероятно хотите;

jQuery(document).ready(function ($) {
    $.fn.digits = function () {
        // as this function is executed on a selector it is an array
        // so process reach item individually.  We also return the original
        // array to allow jQuery "chaining"
        return this.each(function () {
            // get the element we're currently processing
            var $el = $(this);
            // update that element's text
            $el.text($el.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") + '€');
        });
    };

    $(".price").each(function () {
        var $div = $(this);
        var tempText = $.trim($div.text());
        tempText = tempText.substr(0, parseInt(tempText.length));
        $div.text(tempText);
    });

    $(".price").digits();
});