小编Tom*_*dge的帖子

在反应中映射对象键并返回子属性

我有一个映射对象数量的报告。在我的示例中,有 3 个对象数组。我想在每个对象映射时获取其中一个属性的值。

这是我返回报告的片段 React 代码:

return (
    <React.Fragment>
        { Object.keys(result).map((item, i) => (
            <div key={i} className="report">
                    <h3>{result[item].name}</h3>
            </div>
    ))}
    </React.Fragment>
)
Run Code Online (Sandbox Code Playgroud)

它映射const result输出如下:

result = {GK: Array(1), FB: Array(2), FW: Array(1)}
Run Code Online (Sandbox Code Playgroud)

上面有 3 个报告 - GK、FB 和 FW

我现在想进入每个报告并获得一个值。让我们看看FB:

FB: [ 0:{Number: 1, newNumber:"1", name: "FB" }
      1:{Number: 1, newNumber:"1", name: "FB" }
    ]
Run Code Online (Sandbox Code Playgroud)

我想确保当我检索报告时,该name属性还会映射以及我想要获取的任何其他属性。

<h3>{result[item].name}</h3>
Run Code Online (Sandbox Code Playgroud)

我认为上面会检索名称。所以我得到的结果是 3 个空白报告。

arrays object ecmascript-6 lodash reactjs

3
推荐指数
1
解决办法
2万
查看次数

单击单选按钮时,元素内容将更改为图像

我可以让它为文本工作,但不能启用它所以它读取HTML的图像 - http://jsfiddle.net/BgQPF/

<p> Current Radiobutton Value = <span data-bind='text: selected' ></span></p>

<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='<img src="https://github.com/gentoo90/minimal-django-file-upload-example/diff_blob/9ab39c7fe5abaf00f2d586e88e79a5a85075179e/src/for_django_1-3/myproject/media/documents/2012/07/12/example02.jpg?raw=true">' /> Yes
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='N' /> No
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='M' /> Maybe
Run Code Online (Sandbox Code Playgroud)

html javascript jquery knockout-mapping-plugin knockout.js

2
推荐指数
1
解决办法
329
查看次数

使用jQuery仅在div中包装前3项

我正在使用ASP.NET动态地将内容添加到li中.在ul中我想围绕列表的前3个li项包装div类.例如

                <ul class="wrapper">
                    <div class="recommend">
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                    </div>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                            <li><a href="#"><img src="#" /></a></li>
                </ul>
Run Code Online (Sandbox Code Playgroud)

我发现最接近这个结果的是我发现和编辑的小提琴.http://jsfiddle.net/ZuK4E/但它每隔3个而不是仅仅前3个.所有lis是相同的,所以不能用任何目标.

html css asp.net jquery

1
推荐指数
1
解决办法
3494
查看次数

插入品牌形象时,Bootstrap导航栏高度发生了变化

我是HTML和CSS的新手,并且在过去的4天里开始编码.我发现bootstrap非常有用,可以让事情快速发展.

这是我尝试获得具有透明度并固定在顶部的Navbar.

http://jsfiddle.net/revanur/mf5wc/4/

<!-- Top-Navigation-Bar -->
<div class="row-fluid">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner" id="topbar">
            <div class="container"> <a href="#"><img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" /></a>

                <button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <div class="nav-collapse">
                    <ul class="nav pull-right">
                        <li class="active">
                            <form class="navbar-search brand">
                                <input type="text" class="search-query" placeholder="Search">
                            </form>
                        </li>
                        <li><a href="#"> <h5> Discover </h5></a>
                        </li>
                        <li><a href="#"> <h5> Blog </h5></a>
                        </li>
                        <li class="dropdown">   <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>

                            <ul class="dropdown-menu">
                                <li><a href="#"> <h6> Login </h6></a>
                                </li> …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

0
推荐指数
1
解决办法
2万
查看次数

Bootstrap单选按钮预先选择

我正在使用Bootstrap进行新项目,我即将用它构建一个表单.我用JS创建了两个单选按钮('是'和'否')(参见此处的示例),现在我想预先选择其中一个单选按钮.我已经尝试过:

selected = "selected"
Run Code Online (Sandbox Code Playgroud)

checked = "checked"
Run Code Online (Sandbox Code Playgroud)

但按钮没有突出显示.您只能在源代码中看到该属性,而不能在GUI上看到该属性.这是我为按钮所做的(从示例中获取):

<div class="form-group col-lg-4">
    <label for="commentsAllowed">Comments allowed</label>
    <div class="input-group">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="options" id="option1"> Yes
            </label>
            <label class="btn btn-default">
                <input type="radio" name="options" id="option2"> No
            </label>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

你知道我怎么解决这个问题吗?提前致谢!

radio-button twitter-bootstrap

0
推荐指数
1
解决办法
7632
查看次数

即时验证输入

我正在为输入框做自己的验证.它会查找框中填写的任何值.如果其空白,则不会显示"tick",如果找到任何字符,则会显示"tick".

演示:http://www.bootply.com/sldpH9X4Y2

当我单击远离输入框时,勾选仅显示或消失 - 如何在打字时使其工作而无需单击远离框?

$(document).ready(function () {
        var inp = $('input');
        function err() {
            $.each(inp, function () {
                if (!$.trim(this.value)) {
                    $(this).parent().addClass('error');
                    // more stuff
                } else {
                    $(this).parent('div').removeClass('error');
                    // more stuff
                }
            });
        }

        inp.blur(err);
    });
Run Code Online (Sandbox Code Playgroud)

一个例子会很棒!谢谢阅读.

javascript forms validation jquery twitter-bootstrap-3

0
推荐指数
1
解决办法
1779
查看次数