jquery уменьшить и увеличить размер шрифта для нескольких текстов отдельно - PullRequest
Новая
       8

jquery уменьшить и увеличить размер шрифта для нескольких текстов отдельно

1 голос
/ 04 февраля 2020

У меня есть корзина, в которой есть текст. Пользователь может изменить текст отдельно с помощью текстовых полей под карточкой. Теперь я хочу добавить кнопку увеличения и уменьшения шрифта для каждого текстового поля, поэтому, когда пользователь нажимает на каждое из них, только размер шрифта соответствующего изменения текста

enter image description here

Я написал это, но это не работает 

 $(".customize-pelak1 .col-xs-6").each(function () {
        var clicks = 0;

        $(this).find(".up").click(function (e) {
            var id = $(this).parent().siblings(".input-txt").attr("id").toString(),
               element = $(".content1").find("." + id);
            var baseFontSize = parseInt(element.css('font-size') + 2 + 'px !important');


            if (clicks < 3) {
                var baseFontSize = baseFontSize + 2;
                element.css('font-size', (baseFontSize) + 'px !important');
                clicks += 1;
                alert(baseFontSize);
            }
        })
    });








<div class="content1">
                   <span class="top-right drag">text1</span>
                   <span class="mid-right drag">text2</span>
                   <span class="mid-mid drag">text3</span>
                   <span class="bottom-left drag">DELBAR ALLEY</span>
               </div>

content1 - часть корзины 

<div class="col-xs-12 customize-pelak1">
                <div class="col-xs-12">

                </div>
                <div class="col-xs-6 col-sm-4">
                    <input id="top-right" class="input-txt" type="text" placeholder="text1" />
                    <span class="focus-border">
                        <i></i>
                    </span>
                    <div class="font-control">
                        <i class="up"></i>
                        <i class="down"></i>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input id="mid-right" class="input-txt" type="text" placeholder="text2" />
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <input id="mid-mid" class="input-txt" type="text" placeholder="text3" />
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>

                <div class="col-xs-6 col-sm-4">
                    <input id="bottom-left" class="input-txt" type="text" placeholder="DELBAR ALLEY" />
                    <span class="focus-border">
                        <i></i>
                    </span>
                </div>


             </div>

, а следующая часть для текстовых полей

...