nó thay thế một đầu vào văn bản khi nhiều nút lá thư được lựa chọn

Question

Tôi có một ứng dụng jsfiddle dưới đây:

JSFIDDLE

Nếu bạn mở jsfiddle, bạn sẽ thấy một điều khiển hàng đầu, trong đó có "Trả lời" nút. Bạn cũng sẽ thấy một số nút thư, nút "Đúng" và nút "False".

Nút "Đúng" và "False" hoạt động hoàn hảo, có nghĩa là nếu người dùng nhấp vào "Đúng" và sau đó nhấp vào "False", nó sẽ thay thế đầu vào văn bản vì bạn không thể có câu trả lời cả "và" Sai ".

Nhưng có vấn đề với các nút chữ cái. Nếu bạn bấm vào các nút chữ cái, bạn nhận ra rằng bạn có thể bấm vào nhiều nút thư đó là tốt, nhưng vấn đề là nó thay thế đầu vào văn bản cho những chữ cái đó là không chính xác. Nếu nhiều nút chữ cái được chọn, sau đó nó sẽ hiển thị các đầu vào văn bản cho tất cả các nút thư, không thay thế đầu vào văn bản bằng nút chữ cái mới nhất được chọn.

Vì vậy, có ai biết điều tôi cần thay đổi trong mã để đạt được điều này không?

Answer 1

Bạn tạo một data-hid cho nút ở đây:

var hid = "hidden" + id + n + "value"; 
$(btn).attr("data-hid", hid); 

dựa trên này bây giờ bạn tạo ra một lĩnh vực đầu vào:

var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />'; 

Biến id ở đây là id của các nút, mà sẽ là answerC chẳng hạn. Vì vậy, với điều này, bạn sẽ nhận được một hid của #hiddenanswerC0value khi bạn lần đầu tiên bấm vào nút.

Tuy nhiên khi bạn thêm một câu trả lời các nút sẽ có một id tạo ra như thế này:

.attr('id', $this.attr('id')+'Row'); 

Vì vậy, nó sẽ có thêm một ở cuối. Vì vậy, các data-hid và hộp đầu vào sẽ khác nhau là tốt (#hiddenanswerCRow0value).

Chỉnh sửa: Một vấn đề khác là bạn không thực sự tạo dữ liệu ẩn cho các nút mới. Bạn chỉ tạo nó cho tập hợp các nút đầu tiên sau khi nhấp vào chúng. Nhưng khi bạn tạo tập thứ hai (sau khi nhấp) với nút C đã được kích hoạt, nó sẽ không có tập hợp data-hid và do đó bạn không thể xóa nó.

Answer 2

Có vẻ như ID đầu vào không được đặt chính xác trên ID đầu tiên bạn gặp sự cố. Tôi cho thấy nó nhận được ID của "# hiddenanswerC0value" nhưng phải là "# hiddenanswerCRow0value", nếu tôi không nhầm. Tôi sẽ xem xét nó nhiều hơn một chút, nhưng điều đó có thể là đủ để bạn tìm ra nó.