Как получить доступ снаружи. Это в объекте - PullRequest
Новая
       42

Как получить доступ снаружи. Это в объекте

0 голосов
/ 08 ноября 2018

Я пытаюсь переписать свой функциональный код в шаблон модуля js, и у меня есть эта проблема - Когда я пытаюсь удалить поле ввода, которое создается динамически, я использую jQuery $(this) для доступа к элементу dom и удаления его родителя 'div». Но это относится к модальному объекту, а не к компоненту, который я щелкнул. Как решить эту проблему, не создавая счетчик полей и создавая поля с уникальными идентификаторами, затем перехватывая идентификаторы при нажатии и удаляя это поле ввода?

Мой модал: 

var s,
    Modal = {
        settings: {
            addInputBtn: $("#add-input"),
            inputContainer: $("#modal-input-form"),
            checkBoxesList: $(".check-box"),
            inputFieldsList: $(".form-control"),
            inputFieldsOptionalList: $(".optional-modal"),
            inputHtml: `
                <div class="input-group mb-3 optional-modal">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <input type="checkbox" class="check-box">
                        </div>
                    </div>
                    <input type="text" class="form-control">
                    <button type="button" class="close">
                        <span>&times;</span>
                    </button>
                </div>`
        },
        init: function () {
            s = this.settings;
            this.bindUIActions();
        },

        bindUIActions: function () {
            s.addInputBtn.on("click", () => Modal.addInput());
            s.inputContainer.on("click", ".close", () => Modal.deleteInput());
        },

        addInput: function () {
            s.inputContainer.append(s.inputHtml);
        },

        deleteInput: function () {);
            $(this).parent('div').remove();
        }
    }
    Modal.init();

enter image description here

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Вы пробовали с: 

deleteInput: function () {;
        $(this.settings).parent('div').remove();
}

Также у вас есть опечатка на deleteInput: function () { ); ... the rest of the code, удалите лишние ) после функции. Я предлагаю вам попробовать $ (this.settings) .. потому что this получает модальное значение, а затем вам нужно получить доступ к другому объекту внутри этого объекта, который равен settings. Итак, ваш модальный объект состоит из другого объекта, и я думаю, что таким образом вы сможете его получить:)

0 голосов
/ 08 ноября 2018 
deleteInput: function (e) {);
            $(e.target).parent('div').remove();
        }

Обработчикам событий передается аргумент события. Среди его полезных свойств - target, который является элементом html, на котором произошло событие. Обратите внимание, что он может отличаться от this обработчика событий, который является элементом, к которому прикреплен обработчик событий, поскольку события всплывают через DOM. Так что если у вас есть этот HTML: 

<div id="parent">
  <div id="child"></div>
</div>

тогда для этой функции JS: 

$("#parent").on('click', function(e){
  //this will equal <div id="parent"> unless you bind the handler to something else
  //e.target will equal the clicked element:
  //if the user clicked the child, it will equal the child;
  //if the user clicked parent directly, it will equal parent.
  $(e.target).closest('#parent').doSomething();
});
...