fortherest fortherest - 4 months ago 13
CSS Question

Show/hide every each dynamic children element?

I have a form and I want to show child element which is the current whenever I selected form.

I've done so far but I couldn't achieve what I want to do

let me tell you with codes

After I click ADD button bottom of the form another form has been opening right of the exist form as you see image which has been uploaded below

enter image description here

my demo link

and the div which is hide

.ekle
class I want to be appear
.ekle
div

and my js function

$(document).ready(function(){


/** select seçim*/
$('.havale_tipi').on('change', function (e) {
var top_div = $(this).parents(".ekle").find(this);
var optionSelected = $("option:selected", this);
var indexSelected = this.index;
var valueSelected = this.value;

if(indexSelected=="iban_no"){
$(".hesaba_form").fadeOut();
$(".iban_no_form").fadeIn();
}else if(indexSelected="hesaba_form"){
$(".iban_no_form").fadeOut();
$(".hesaba_form").fadeIn();
}

});

/**select seçim bitiş*/

/** form ekle **/
$(".btn_ekle").on("click",function(e){
var nesne = $(".ekle");
var ekle = nesne.html();
$(".add_after").append(ekle).show();
e.preventDefault();
})
/** form ekle bitiş**/
});

Answer
  1. You should use .val() to get the selected value
  2. You have forgotten one = in your else if state
  3. The value in the else if should be hesaba not hesaba_form
  4. You need to create the event listener in your click event. Otherwise it could not be registered correctly to the changed element.

Changed code:

$(".btn_ekle").on("click", function(e) {
    var nesne = $(".ekle");
    var ekle = nesne.html();
    $(".add_after").append(ekle).show();
    e.preventDefault();

    /** select seçim*/
    $('.havale_tipi').on('change', function() {
        var value = $(this).val();

        if (value == "iban_no") {
            $(".hesaba_form").fadeOut();
            $(".iban_no_form").fadeIn();
        } else if (value == "hesaba") {
            $(".iban_no_form").fadeOut();
            $(".hesaba_form").fadeIn();
        }
    });
});

Otherwise you can use a live listener, which even workes with new elements or changed elements in the future:

$(document).on('change','.havale_tipi',function(){
    var value = $(this).val();

    if (value == "iban_no") {
        $(".hesaba_form").fadeOut();
        $(".iban_no_form").fadeIn();
    } else if (value == "hesaba") {
        $(".iban_no_form").fadeOut();
        $(".hesaba_form").fadeIn();
    }
});