如果.length是>选择选项

时间：2016-03-17 15:30:13

标签： javascript jquery css

＆＃13;
＆＃13; 
function Player(username, lvl, exp, expNeeded, nextLevel, gold, hp, atk, def, spd) {
    var self = this;
    this.username = username;
    this.lvl = lvl;
    this.exp = exp;
    this.nextLevel = nextLevel;
    this.expNeeded = expNeeded;
    this.gold = gold;
    this.fullLife = hp;
    this.hp = hp;
    this.atk = atk;
    this.def = def;
    this.spd = spd;
    this.implement = function() {
        $('#user').text(this.username).addClass('playerName').data('player', self)
        $('#username').text("Username: " + this.username);
        $('#lvl').text("Level: " + this.lvl);
        $('#exp').text("Experience: " + this.exp);
        $('#expNeeded').text("Experience Needed: " + this.expNeeded);
        $('#gold').text("Gold: " + this.gold);
        $('#hp').text("HP: " + this.fullLife);
        $('#attack').text("Attack: " + this.atk);
        $('#defense').text("Defense: " + this.def);
        $('#speed').text("Speed: " + this.spd);
        $('#nextLevel').text("Next Level: " + this.nextLevel);
    }
    this.implement();
}
var newPlayer = new Player(prompt("What is your username?"), 1, 0, 10, 10, 0, 10, 2, 1, 1);
playerEl = $('.playerName');
player = playerEl.data('player');

function Monster(name, exp, gold, hp, atk, def, spd) {

  var self = this;
	this.name = name;
	this.exp = exp;
  this.gold = gold;
  this.fullLife = hp;
  this.hp = hp;
  this.atk = atk;
  this.def = def;
  this.spd = spd;
  // Method definition
  this.implement = function() {
  	var monsterList = document.getElementById('monsterList');
    var opt = document.createElement('OPTION'); // Creating option
    opt.innerText = this.name; // Setting innertText attribute
    $(opt).data('monster', self)
    monsterList.appendChild(opt); // appending option to select element
  }
  this.len = this.name.length;
  this.playerDamage = 0;
  this.playerDam = function () {
  	if(player.atk <= this.def) {
    	self.playerDamage = player.atk - 1;
      return self.playerDamage;
    }
    else {
  	self.playerDamage = Math.round((player.atk - self.def) * (2 - Math.random()));
    return self.playerDamage;
    }
  }
  this.monsterDamage = 0;
  this.monsterDam = function() {
      if(this.atk <= player.def) {
          self.monsterDamage = monster.atk - 1;
          return self.monsterDamage;
      }
    else {
        self.monsterDamage = Math.round((self.atk - player.def) * (2 - Math.random()));
        return self.monsterDamage;
    }
  }
  // Method execution
  this.implement();
}

var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);
var mouse = new Monster("mouse", 2, 3, 10, 2, 1, 2);
var rat = new Monster("rat", 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster("chihuahua", 6, 8, 35, 6, 1, 4);
var bulldog = new Monster("bulldog", 10, 14, 60, 10, 4, 1);
var wolf = new Monster("Wolf", 15, 18, 65, 12, 3, 6);
var vampie = new Monster("Vampire", 20, 23, 100, 12, 5, 4);
var werewolf = new Monster("Werewolf", 25, 29, 100, 14, 3, 9);
var giantSlime = new Monster("Giant Slime", 31, 38, 200, 7, 15, 1);
var babyDragon = new Monster("Baby Dragon", 39, 50, 150, 16, 9, 5);
var orc = new Monster("Orc", 50, 64, 220, 10, 12, 4);
var succubi = new Monster("Succubi", 61, 80, 190, 21, 8, 12);
var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);
var sanaan = new Monster("Sanaan", 150, 500, 500, 55, 45, 30);


monsterEl = $('#monsterList option:selected');
monster = monsterEl.data('monster');
$('#battleButton').click(function() {
	//playerDam();
    var round = 0;

  $('#dam').empty();
  $('#monsterdam').empty();
  while(monster.hp > 0 && player.hp > 0 && round < 20) {
      $('#monsterdam').append("</p>The " + $('#monsterList').val() + " has hit you for " + monster.monsterDam() + " damage</p>");
      player.hp -= monster.monsterDam();
  	$('#dam').append("</p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
    round +=1;
        if(round >=20) {
            $('#monsterdam').append("</p>The battle has timed out</p>");
            $('#dam').append("</p>The battle has timed out</p>");
        }
  }
  if(monster.hp <= 0){
  $('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");
    monster.hp = monster.fullLife;
    player.hp = player.fullLife;
    player.exp += monster.exp;
    player.gold += monster.gold;
    player.nextLevel -= monster.exp;
    player.implement();
    if(player.exp >= player.expNeeded) {
        lvlUp();
    }
}
if(player.hp <= 0){
$('#monsterdam').append("<p>The " + $('#monsterList').val() + " has defeated you!</p>");
  monster.hp = monster.fullLife;
  player.hp = player.fullLife;
}
});

var lvlUp = function() {
    player.expNeeded += player.expNeeded + player.lvl * player.lvl;
    player.nextLevel = player.expNeeded - player.exp;
    player.fullLife += player.lvl * 5 + (2 * player.lvl);
    player.lvl += 1;
    player.atk += 1;
    player.def += 1;
    player.spd += 1;
}

if(monster.len > 8) {
    $('select').css({
        "font-size": "12px"
    });
}
else {
    $('select').css({
        "font-size": "18px"
    });
}
＆＃13; 
body {
  background-color: #000;
}

#stats {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#stats li {
    display: list-item;
    list-style-type: none;
    color: #fff;
    font-size: 12px;
}

#stats ul {
    display: inline-block;
    float: left;
    text-align: left;
    margin-top: 10px;
}

#intro {
    max-width: 700px;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    line-height: 1.25;
    font-family: "Cabin", sans-serif;
    font-weight: 500;
    padding-bottom: 30px;
}

#stats ul:not(.firstul) {
    margin-left: 100px;
}

#nav {
    width: 1200px;
    height: 75px;
    margin: auto;
    border-radius: 10px;
    text-align: center;
    margin-top: 5px;
    border: 2px solid rgba(98, 39, 39, 0.6);
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1 );
}

#user {
    font-size: 32px;
    margin-top: 0px;
    color: rgba(156, 48, 48, 1);
    -webkit-text-stroke: 1.5px black;
    text-shadow: 2px 2px 2px darkred,
                       1px 1px 0px #000,
                       3px 3px 0px #000,
                       4px 4px 2px #000;
}

#nav li {
    display: inline;
    font-size: 21px;
    text-align: center;
    line-height: .8;
    color: #a3a3a3;
    text-shadow: 1px 1px 1px #111,
                       2px 2px 4px #000;
}

#nav li:hover {
    color: #e0e0e0;
    text-shadow: 2px 2px 2px #222,
                       2px 2px 3px #333,
                       3px 3px 0px #000;
}

#nav li:not(.first) {
    margin-left: 40px;
}

a {
    text-decoration: none;
    outline: 0;
}

select:focus {
    outline: 0;
}

*:focus {
    outline: 0;
}
ul a:hover {
    text-decoration: none;
}

select {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  margin: auto;
  margin-left:450px;
  margin-top: 15px;
  float: none;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 18px;
}


option {
    text-transform: lowercase;
    background-color: #000;
}

main {
    width: 1200px;
    height: 500px;
    margin: auto;
    border: 2px solid rgba(98, 39, 39, .6);
    border-radius: 10px;
    margin-top: 5px;
    background: rgba(255,255,255,0);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(24%, rgba(255,255,255,0)), color-stop(100%, rgba(143,57,57,0.5)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0) 24%, rgba(143,57,57,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#8f3939', GradientType=1);
}

#battleButton {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  margin-left: 50px;
  margin-top: 15px;
  height: 50px;
  width: 100px;
  font-size: 18px;
  text-transform: uppercase;
}

#help, #noHelp {
  background-color: rgba(0, 0, 0, 0);
  border-color: #941919;
  color: #941919;
  border-radius: 10px;
  margin: auto;
  float: none;
  height: 50px;
  width: 100px;
  display: inline-block;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 100px;
}

#help {
    margin: auto;
    margin-left: 495px;
}

#noHelp {
    margin: auto;
}

#dam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  float: left;
  margin: 40px;
  margin-left: 100px;
  max-height: 350px;
  overflow-y: auto;
}

#monsterdam {
  color: #941919;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 40%;
  min-width: 40%;
  text-align: center;
  margin-right: 100px;
  float: right;
  margin: 40px;
  max-height: 350px;
  overflow-y: auto;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
＆＃13; 
  <body>
<header id="stats">
    <ul class="firstul">
        <li id="username"></li>
        <li id="lvl"></li>
        <li id="exp"></li>
    </ul>
    <ul>
        <li id="expNeeded"></li>
        <li id="nextLevel"></li>
        <li id="hp"></li>
    </ul>
    <ul>
        <li id="attack"></li>
        <li id="defense"></li>
        <li id="speed"></li>
    </ul>
    <ul>
        <li id="gold"></li>
        <li id="items">Items: </li>
    </ul>
</header>
<header id="nav">
    <h1 id="user"></h1>
    <ul>
        <a href="#"><li class="first">Home</li></a>
        <a href="#"><li>Battle</li></a>
        <a href="#"><li>Profile</li></a>
        <a href="#"><li>Inventory</li></a>
        <a href="#"><li>Help</li></a>
    </ul>
</header>
<main>
    <div>
    <select id="monsterList"></select>

    <button id="battleButton">Battle</button>
    </div>
    <div id="dam"></div>
    <div id="monsterdam"></div>
</main>

    <script src="game.js"></script>
  </body>
＆＃13;
＆＃13;
＆＃13;

我有一个选择菜单，如果所选选项的字长于一定数量的字符，我想将字体大小更改为更小。我已经尝试了多种方法来做到这一点并没有任何效果。这是我最近的尝试。

http://codepen.io/StrengthandFreedom/pen/YqNrYO 

if(monster.len > 8) {
    $('select').css({
        "font-size": "12px"
    });
}
else {
    $('select').css({
        "font-size": "18px"
    });
}

5 个答案:

答案 0 :(得分：3)

只是浏览一下代码，看起来你没有绑定选择的任何更改事件。 if语句只在​​页面加载时运行一次，检查长度，这可能不是你想要的。你需要绑定更改，检查所选怪物的长度，然后对其采取行动。

答案 1 :(得分：3)

你可以这样做：

＆＃13;
＆＃13; 
$('#monsterList').on('change', function() {

  if ($('option:selected', this).text().length > 8) {
    $('select').css({
      "font-size": "12px"
    });
    $('select option').css({
      "font-size": "12px"
    });
  } else {

    $('select').css({
      "font-size": "18px"
    });
    $('select option').css({
      "font-size": "12px"
    });

  }

}).trigger('change');
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="monsterList">
  <option>fly</option>
  <option>wolf</option>
  <option>chihuahua</option>
  <option>fladaday</option>
  <option>Vampire</option>
  <option>Giant Slime</option>
  <option>Orc</option>
  <option>Sanaan</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

您的检查仅在页面加载时运行在默认选择选项上。更改select中的值时，代码将不会运行。当select元素被更改时，您需要触发该代码块。

所以包装

$("select").on("change", function () {
    /* your code */
}).trigger("change");  //so it runs when initialized

答案 3 :(得分：1)

如果您希望<option>标记根据您的怪物名称长度具有不同的样式，我是否正确？

$('#monsterList option').each(function(){
        if($(this).html().length > 8){
        $(this).css('font-size', '12px');
      }
    })

如果名称超过font字段中的8个字符，则此代码将更改select。你的代码有点破坏，所以我没有尝试使用你自己的变量，因为所有的spagetthi，但这确实有效。

工作脚本：https://jsfiddle.net/sbxu0p2d/4/

答案 4 :(得分：1)

如果你移动这一行：

var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);

在此之前：

var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);

然后您会注意到您的font确实以您希望的方式加载，因此您实施的.len功能正常运行。如上所述，您现在需要的是将event listener绑定到dropdownbox，然后以与您现在相同的方式检查所选值。

相关问题
最新问题