Question

我有一个战斗系统，我想设置它，这样它不会填充#dam的文本，它将创建一个新的p元素，直到怪物hp为0.我希望它在一次点击创建所有p元素的按钮。每个p元素都应显示在其上方的元素下方。

$('#battleButton').click(function() {  
    //playerDam();
  monsterEl = $('#monsterList option:selected');  
  monster = monsterEl.data('monster')
  if(monster.hp > 0) {
    $('#dam').html("You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage");
    monster.hp -= monster.playerDam();
  }
  else {
    $('#dam').html("You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!");
    monster.hp = monster.hp;
  }
});

此外代码现在一旦monster.hp达到0或更低，我无法弄清楚如何重置hp以便点击战斗再次起作用。

Answer 1

您可以尝试将p＃dam更改为div容器。然后只需附加p标签即可。

所以这个

<android.support.design.widget.CoordinatorLayout

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/maintoolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <android.support.design.widget.TabLayout
        android:id="@+id/maintabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>





<android.support.v4.view.ViewPager
    android:id="@+id/mainviewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />


<LinearLayout
    android:id="@+id/completeBottomView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBarBottomView"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:indeterminate="false"
        android:visibility="gone"
        android:max="100"
        android:progress="1"/>

    <HorizontalScrollView
        android:id="@+id/limiter_scroller"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:background="#FF3399"
        >
        <LinearLayout
            android:id="@+id/limiter_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:onClick="clickFromBottomView"/>
    </HorizontalScrollView>

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

变成这个

<p id="dam"></p>

和这一行（你的小提琴54）

<div id="dam"></div>

变成这个

$('#dam').html("You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage");

Answer 2

这是while循环的教科书情况。要对元素进行排队，请使用append代替html，然后在战斗开始时清空div：

$('#dam').empty();
while(monster.hp > 0) {
    $('#dam').append("<p>You have hit the " + $('#monsterList').val() + " for " + monster.playerDam() + " damage</p>");
    monster.hp -= monster.playerDam();
}
$('#dam').append("<p>You have defeated the " + $('#monsterList').val() + ", you have received " + monster.exp + " experience and " + monster.gold + " gold!</p>");

要重置怪物的生命，你必须在Monster课程中添加一个属性，以便在他完美健康时存储他的生命：

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;
    ...
}

然后你所要做的就是在战斗结束时将他的hp放回他的fullLife财产：

monster.hp = monster.fullLife;

这是小提琴：https://jsfiddle.net/5cdwu23d/3/

（但要小心，你的playerDam功能不是很好，你在while有一些无限循环，当怪物对玩家来说很难以及他的生命永远不会接近零时）

Answer 3

我不确定通过单击按钮创建所有<p>元素是什么意思，但这可能会有所帮助：

您可以通过将html作为字符串包装在jquery函数中来创建jquery中的<p>元素，如下所示：

var paragraph = $('<p>Hey</p>');

一次一个或一次一个，你可以以这种方式循环创建元素，然后使用jquery的追加将它们添加到#dam元素

JSFiddle

继续创建新元素，直到满足条件

3 个答案: