javascript prototypes

Question

javascript prototypes

Navigation

#1 by (5 votes)

1

Hello, I would like to know how to access the card to be deleted from my main.js but by calling the deleteCard method in question

// MAIN
$(document).ready(function(){
    initBtnListeners();
});

function initBtnListeners(){
    $('#add-card-btn').click(function(e){
        e.preventDefault();
        
        $title       = $('input[name="title"]').val();
        $image       = $('input[name="imageUrl"]').val();
        $description = $('input[name="description"]').val();
        
        var card = {
            title: $title,
            image: $image,
            description: $description,
        };
        var card1 = new Card(card).addCard();
        $('#create-card-form')[0].reset();
        
        $(document).on('click', '.btn-delete-card', function(card1){
            card1.deleteCard();
        });
    });
    
}

//CARD PROTOTYPE
function Card(card){
    this.title = card.title;
    this.image = card.image;
    this.description = card.description;
}

Card.prototype.addCard = function(){
    var duplicate = $('#templates > [data-element="card"]').clone();
    duplicate.find('.card-title').text(this.title);
    duplicate.find('.card-img-top').text(this.image);
    duplicate.find('.card-text').text(this.description);
    this.current = duplicate;
    $('#cards-container').append(duplicate);   
};

Card.prototype.deleteCard = function(){ 
    $(this.current).remove();
};

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery - Tutorial</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    
    <div class="container">
        <div class="row mb-5">
            <div class="col-xs-12 col-lg-3">
                <h1>Create Card</h1>
                <form id="create-card-form">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-tag"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="title" placeholder="Enter title">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-image"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="imageUrl" placeholder="Enter Image URL">
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-comments"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control" name="description" placeholder="Description">
                    </div>
                    <div class="form-actions">
                        <button id="add-card-btn" class="btn btn-primary btn-block">Add Card</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-lg-12">
                <h1>Cards List</h1>
            </div>
        </div>
        <div class="row" id="cards-container">
            <div class="col-xs-12 col-md-3" data-element="card">
                <div class="card">
                    <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
                        <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div id="templates" style="display: none;">
        <div class="col-xs-12 col-md-3" data-element="card">
            <div class="card">
                <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo
                        tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
                        <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
        
        <script src="./card.js"></script>
        <script src="./index.js"></script>
    </body>
    
    </html>

javascript prototipos

asked by francisco dwq 24.05.2018 в 12:09

source

1 answer

Preserve value in a select html + php Select with jquery all the elements except a specific ID

score 5 · Accepted Answer

You have two problems:

var card1 = new Card(card).addCard();

Here you should divide it into two rows to keep card1 as the instance of Card .
```
var card1 = new Card(card)
card1.addCard();
```
$(document).on('click', '.btn-delete-card', function(card1){

Here you are passing to the function a parameter card1 and then when you do card1.deleteCard(); it does not recognize the card1 of your instance if not the parameter that is undefined because in the method on for the function you do not need to pass parameters.

For the problem that you mention that it deletes all the duplicates, it is because the event .on("click") applies it to the document and you tell it to delete over the previously created instance.

The solution is, use your own card so that the event is linked to that card using $(card1.current).on(...

It would stay like this:

// MAIN
$(document).ready(function() {
  initBtnListeners();
});

function initBtnListeners() {
  $('#add-card-btn').click(function(e) {
    e.preventDefault();

    $title = $('input[name="title"]').val();
    $image = $('input[name="imageUrl"]').val();
    $description = $('input[name="description"]').val();

    var card = {
      title: $title,
      image: $image,
      description: $description,
    };
    var card1 = new Card(card)
    card1.addCard();
    $('#create-card-form')[0].reset();

    $(card1.current).on('click', '.btn-delete-card', function() {
      card1.deleteCard();
    });
  });

}

//CARD PROTOTYPE
function Card(card) {
  this.title = card.title;
  this.image = card.image;
  this.description = card.description;
}

Card.prototype.addCard = function() {
  var duplicate = $('#templates > [data-element="card"]').clone();
  duplicate.find('.card-title').text(this.title);
  duplicate.find('.card-img-top').text(this.image);
  duplicate.find('.card-text').text(this.description);
  this.current = duplicate;
  $('#cards-container').append(duplicate);
};

Card.prototype.deleteCard = function() {
  $(this.current).remove();
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JQuery - Tutorial</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div class="container">
    <div class="row mb-5">
      <div class="col-xs-12 col-lg-3">
        <h1>Create Card</h1>
        <form id="create-card-form">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-tag"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="title" placeholder="Enter title">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-image"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="imageUrl" placeholder="Enter Image URL">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">
                                <i class="fa fa-comments"></i>
                            </span>
            </div>
            <input type="text" class="form-control" name="description" placeholder="Description">
          </div>
          <div class="form-actions">
            <button id="add-card-btn" class="btn btn-primary btn-block">Add Card</button>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-12">
        <h1>Cards List</h1>
      </div>
    </div>
    <div class="row" id="cards-container">
      <div class="col-xs-12 col-md-3" data-element="card">
        <div class="card">
          <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
            <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div id="templates" style="display: none;">
    <div class="col-xs-12 col-md-3" data-element="card">
      <div class="card">
        <img class="card-img-top" src="http://lorempixel.com/200/200/" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, quasi. Fugit inventore natus repellendus explicabo tempora hic consectetur ipsum aliquid eos non ut est, vel, ipsam deleniti atque libero eius!</p>
          <a href="#" class="btn btn-danger btn-block btn-delete-card">Delete</a>
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

  <script src="./card.js"></script>
  <script src="./index.js"></script>
</body>

</html>