选中复选框后返回文本

时间:2018-06-16 03:21:51

标签: javascript

在我的网站中,我有一个表单,用户可以单击复选框选择“可用”。我希望在displayArticle函数中返回“Yes”或“No”,具体取决于是否选中该框。现在它返回True或False,这不是最佳的。我该如何编码?

这是我的整个JS代码:

App = {
  web3Provider: null,
  contracts: {},
  account: 0x0,
  loading: false,

  init: function() {
    return App.initWeb3();
  },

  initWeb3: function() {
    // initialize web3
    if(typeof web3 !== 'undefined') {
      //reuse the provider of the Web3 object injected by Metamask
      App.web3Provider = web3.currentProvider;
    } else {
      //create a new provider and plug it directly into our local node
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);

    App.displayAccountInfo();

    return App.initContract();
  },

  displayAccountInfo: function() {
    web3.eth.getCoinbase(function(err, account) {
      if(err === null) {
        App.account = account;
        $('#account').text(account);
        web3.eth.getBalance(account, function(err, balance) {
          if(err === null) {
            $('#accountBalance').text(web3.fromWei(balance, "ether") + " ETH");
          }
        })
      }
    });
  },

  initContract: function() {
    $.getJSON('RentalContract.json', function(chainListArtifact) {
      //added May24 to json file name
      // get the contract artifact file and use it to instantiate a truffle contract abstraction
      App.contracts.RentalContract = TruffleContract(chainListArtifact);
      // set the provider for our contracts
      App.contracts.RentalContract.setProvider(App.web3Provider);
      // listen to events
      App.listenToEvents();
      // retrieve the article from the contract
      return App.reloadArticles();
    });
  },

  reloadArticles: function() {
    //avoid reentry bugs
    if(App.loading){
      return;
    }
    App.loading = true;

    // refresh account information because the balance might have changed
    App.displayAccountInfo();

    var chainListInstance;

    App.contracts.RentalContract.deployed().then(function(instance) {
      chainListInstance = instance;
      return chainListInstance.getArticlesForSale();
    }).then(function(articlesIds) {

      // retrieve the article placeholder and clear it
      $('#articlesRow').empty();

      for(var i = 0; i < articlesIds.length; i++){
        var articleId = articlesIds[i];
        chainListInstance.articles(articleId.toNumber()).then(function(article){
          App.displayArticle(article[0], article[1], article[3], article[4], article[5], article[6], article[7]);
        });
      }
      App.loading = false;

    }).catch(function(err) {
      console.error(err.message);
      App.loading = false;
    });
  },

  //displayArticle: function(id, seller, beds, baths, propaddress, rental_price, property_type, description, available, contact_email) {
  displayArticle: function(id, seller, propaddress, rental_price, description, available, contact) {
    var articlesRow = $('#articlesRow');

    //var etherPrice = web3.fromWei(price, "ether");

    var articleTemplate = $("#articleTemplate");
    //articleTemplate.find('.panel-title').text(propaddress);
    //articleTemplate.find('.beds').text(beds);
    //articleTemplate.find('.baths').text(baths);
    articleTemplate.find('.propaddress').text(propaddress);
    articleTemplate.find('.rental_price').text('$' + rental_price);
    //articleTemplate.find('.property_type').text(property_type);
    articleTemplate.find('.description').text(description);
    articleTemplate.find('.available').text(available);
    articleTemplate.find('.contact').text(contact);
  //  articleTemplate.find('.article_price').text(etherPrice + " ETH");
    articleTemplate.find('.btn-buy').attr('data-id', id);
    // articleTemplate.find('.btn-buy').attr('data-value', etherPrice);

    //seller
    if(seller == App.account){
      articleTemplate.find('.article-seller').text("You");
      articleTemplate.find('.btn-buy').hide();
    }else{
      articleTemplate.find('.article-seller').text(seller);
      articleTemplate.find('.btn-buy').show();
    }
    //add this new article
    articlesRow.append(articleTemplate.html());
  },



  sellArticle: function() {
    // retrieve the detail of the article
  //  var _article_name = $('#article_name').val();
    var _description = $('#description').val();
    //var _beds = $('#beds').val();
    //var _baths = $('#baths').val();
    var _propaddress = $('#propaddress').val();
    var _rental_price = $('#rental_price').val();
    //var _property_type = $('#property_type').val();
    var _available = $('#available').val();
    var _contact = $('#contact').val();
  //  var _article_price = $('#article_price').val();
  //  var _price = web3.toWei(parseFloat($('#article_price').val() || 0), "ether");

//    if((_description.trim() == '') || (rental_price == 0)) {
      // nothing to sell
//      return false;
//    }

    App.contracts.RentalContract.deployed().then(function(instance) {
      //return instance.sellArticle(_description, _beds, _baths, _propaddress, _rental_price, _property_type, _available, _contact_email, {
      return instance.sellArticle(_propaddress, _rental_price, _description, _available, _contact,{
          from: App.account,
        gas: 500000
      });
    }).then(function(result) {

    }).catch(function(err) {
      console.error(err);
    });
  },

  // listen to events triggered by the contract
  listenToEvents: function() {
    App.contracts.RentalContract.deployed().then(function(instance) {
      instance.LogSellArticle({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._propaddress + ' is now for sale</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles();
      });

      instance.LogBuyArticle({}, {}).watch(function(error, event) {
        if (!error) {
          $("#events").append('<li class="list-group-item">' + event.args._buyer + ' bought ' + event.args._propaddress + '</li>');
        } else {
          console.error(error);
        }
        App.reloadArticles();
      });
    });
  },

  buyArticle: function() {
    event.preventDefault();

    // retrieve the article price and data
    var _articleId = $(event.target).data('id');
    var _price = parseFloat($(event.target).data('value'));

    App.contracts.RentalContract.deployed().then(function(instance){
      return instance.buyArticle(_articleId, {
        from: App.account,
        value: web3.toWei(_price, "ether"),
        gas: 500000
      });
    }).catch(function(error) {
      console.error(error);
    });
  }
};

$(function() {
  $(window).load(function() {
    App.init();
  });
});

2 个答案:

答案 0 :(得分:0)

如果我理解你要做什么,也许这对你有用。

<head>

答案 1 :(得分:0)

这样做:

articleTemplate.find( '.available' ).text( available ? 'Yes' : 'No' );

示例:

&#13;
&#13;
function returnValue() {
  $( '#val' ).text( $( '#chk' ).is( ':checked' ) ? 'Yes' : 'No' )
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="chk" onclick="returnValue()" />
<label for="chk">Available</label>
<h2 id="val"></h2>
&#13;
&#13;
&#13;