ランダムなカードを押してpタグを入力フィールドに入れます。

Question

JS、HTML、CSSを初めて使用しています。これまではランダムなカードを作成するボタンを作成しました。カードにはpというタグ "title"があります。カードをクリックすると、2つの入力フィールドと保存ボタンと削除ボタンが表示されます。

1. 私はデザインに助けが必要です。私はベストを尽くしましたが、私はこの2つのボタンと2つの入力フィールドをよく見えるようにすることはできません。あなたは私を助けてくれますか？

2. カードをクリックすると、pタグのタイトルが入力フィールドの1つに入ります。 inputフィールドをクリックすると、pタグが再び消えるはずです。

3. 私が最後に作りたいのは、編集モードにできるのは1枚だけです。

これは私のコードです：

$(document).ready(function() { 
 
    $("button.plus").on("click", function() { 
 
     var newCard = $('#cardPrototype').clone(true); 
 
     $(newCard).css('display', 'block').removeAttr('id'); 
 
     $('#newCardHolder').append(newCard); 
 
    }); 
 

 
    $('body').on('click', '.card', function() { 
 
     $(this).find('form').show(); 
 
     $(this).find('span').remove(); 
 

 
    }); 
 

 
    /*delete button*/ 
 
    $('body').on('click', '.card .delete', function() { 
 
     $(this).closest('.card').remove(); 
 
    }); 
 
});

.item { 
 
    width: 300px; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
    padding: 10px; 
 
    background-color: #BBBBBB; 
 
    border: 1px solid #ccc; 
 
    border-radius: 10px; 
 
} 
 
button div.item { 
 
    right: 0; 
 
    margin-right: 10px; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-top-left-radius: 55px; 
 
    border: 5px solid white; 
 
    background-color: #666666; 
 
    font-size: 70px; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 75px; 
 
    bottom: 10px; 
 
    position: fixed; 
 
    cursor: pointer; 
 
    z-index: 2; 
 
} 
 
.input-feld { 
 
    font-family: TheSans Swisscom; 
 
    margin: 3px; 
 
    width: 260px; 
 
} 
 
.card { 
 
    width: 300px; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
    padding: 10px; 
 
    background-color: #BBBBBB; 
 
    border: 1px solid #ccc; 
 
    border-radius: 10px; 
 
    position: relative; 
 
} 
 
.delete { 
 
    font-family: 'TheSans Swisscom'; 
 
    right: 12px; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 
.speichern { 
 
    font-family: 'TheSans Swisscom'; 
 
    background-color: greenyellow; 
 
    border-radius: 5px; 
 
} 
 
.abbrechen { 
 
    font-family: "TheSans Swisscom"; 
 
    background-color: red; 
 
    border-radius: 5px; 
 
    margin-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="plus"> 
 
    <div class="item"> 
 
     <p>+</p> 
 
    </div> 
 
</button> 
 
<div id="newCardHolder"> 
 
</div> 
 
<div id="cardPrototype" class="card" style="display:none;"> 
 
    <p class="delete">x</p> 
 
    <span>Title</span> 
 
    <form name="theform" style="display:none;"> 
 
     <input class="input-feld" type="text"> 
 
     <br> 
 
     <input class="input-feld " type="text"> 
 
     <br> 
 
     <input class="speichern"type="button" onClick="new Person()" value="Speichern"> 
 
     <input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen"> 
 
    </form> 
 
</div>

Answer 1

これを試してみてください - これは私が

• いくつかの設計上のCHを変更しているあなたに

  を助けるかもしれないかもしれませ

• 入力は、あなたが持っている場合にのみ、一つの項目.classは、編集モード

$(".plus").on("click", function() { 
 
    var newCard = $('#cardPrototype').clone(true); 
 
    $(newCard).css('display', 'block').removeAttr('id'); 
 
    $('#newCardHolder').append(newCard); 
 
}); 
 

 
$('body').on('click', '.card', function() { 
 
    $(this).find('.input-feld').attr("placeholder", $(this).find('span').text()); 
 
    $(this).find('span').hide(); 
 
    $(this).find('.minimize').show(); 
 
    $(this).find('form').show(); 
 
}); 
 

 

 

 

 
$('.card').on('click', function() { 
 
    $('.card').find('form').hide(); 
 
    $('.card').find('span').show(); 
 
    $('.card').find('.minimize').hide(); 
 
}); 
 

 

 
/*delete button*/ 
 
$('body').on('click', '.card .delete', function() { 
 
    $(this).closest('.card').remove(); 
 
}); 
 

 
/*min button*/ 
 
$('body').on('click', '.card .minimize', function() { 
 
    return false; 
 
});

.item { 
 
    width: 300px; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
    padding: 10px; 
 
    background-color: #BBBBBB; 
 
    border: 1px solid #ccc; 
 
    border-radius: 10px; 
 
} 
 
.item p { 
 
    margin: 0px; 
 
} 
 
div.item { 
 
    right: 0; 
 
    margin-right: 10px; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-top-left-radius: 55px; 
 
    border: 5px solid white; 
 
    background-color: #666666; 
 
    font-size: 70px; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 75px; 
 
    bottom: 10px; 
 
    position: fixed; 
 
    cursor: pointer; 
 
    z-index: 2; 
 
} 
 
.input-feld { 
 
    font-family: TheSans Swisscom; 
 
    margin: 5px 3px; 
 
    padding: 3px; 
 
    width: 250px; 
 
} 
 
.card { 
 
    width: 300px; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
    padding: 10px; 
 
    background-color: #F4F4f4; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    position: relative; 
 
} 
 
.delete { 
 
    font-family: 'TheSans Swisscom'; 
 
    right: 12px; 
 
    top: -10px; 
 
    color: red; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 
.minimize { 
 
    font-family: 'TheSans Swisscom'; 
 
    right: 28px; 
 
    top: -10px; 
 
    color: grey; 
 
    position: absolute; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    display: none; 
 
} 
 
.speichern { 
 
    font-family: 'TheSans Swisscom'; 
 
    background-color: lightgreen; 
 
    border-radius: 5px; 
 
    color: darkgreen; 
 
    border-color: lightgreen; 
 
    margin-top: 5px; 
 
} 
 
.abbrechen { 
 
    font-family: "TheSans Swisscom"; 
 
    background-color: orangered; 
 
    border-radius: 5px; 
 
    margin-left: 10px; 
 
    color: white; 
 
    border-color: orangered; 
 
    margin-top: 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="plus"> 
 
    <div class="item"> 
 
     <p>+</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="newCardHolder"> 
 

 
    </div> 
 

 
    <div id="cardPrototype" class="card" style="display:none;"> 
 
    <p class="delete" title="delete">&times;</p> 
 
    <p class="minimize" title="minimize">&ndash;</p> 
 
    <span>Title</span> 
 
    <form name="theform" style="display:none;"> 
 
     <input class="input-feld" type="text"> 
 
     <br> 
 
     <input class="input-feld" type="text"> 
 
     <br> 
 
     <input class="speichern" type="button" onClick="new Person()" value="Speichern"> 
 
     <input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen"> 
 
    </form> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
    </div> 
 
</body> 
 

 
</html>