求救~~js中按钮不能用冒泡排序来调换位置吗

想学好js的过气设计师 2017-05-16 03:31:43
小菜鸟刚开始学JS
遇到点问题求大神支招


想做一个类似淘宝点击人气排序的东东，点击一次人气＋1，人气越多的就往前排；
现在遇到了一个问题，我用冒泡排序替换所有的属性后发现，点击加人气的按钮不会被替换，这是什么回事啊？

下面是我的html
<body>
<input type="button" value="按人气排" id="people"/>
<input type="button" value="按人销量排" id="sale"/>
<input type="button" value="按信誉排" id="reputation"/>
<input type="button" value="按价格排" id="price"/>
<select><option >按人气排</option>
<option id="sale">按人销量排</option>
<option >按信誉排</option>
<option >按价格排</option></select>
<ul id="list">
<li>
<dd id="img1"></dd><br />
　信誉：<b>3</b>
<br />
　¥<strong>123</strong><br />
　销量：<em>34</em><br />
　人气:<span id="pop">0</span>
<input type="button" value="座椅1加人气" id="click"/>
</li>
<li>
<dd id="img2"></dd ><br />
　信誉：<b>5</b>
<br />
　¥<strong>13</strong><br />
　销量：<em>35</em><br />
　人气:<span id="pop2">0</span>
<input type="button" value="电脑1加人气" id="click2"/>
</li>
<li>
<dd id="img3"></dd><br />
　信誉：<b>8</b>
<br />
　¥<strong>53</strong><br />
　销量：<em>134</em><br />
　人气:<span id="pop3">0</span>
<input type="button" value="手机1加人气" id="click3"/>
</li>
<li>
<dd id="img4"></dd><br />
　信誉：<b>1</b>
<br />
　¥<strong>883</strong><br />
　销量：<em>24</em><br />
　人气:<span id="pop4">0</span>
<input type="button" value="纸巾1加人气" id="click4"/>
</li>

</ul>

</body>
JS

window.onload=function()

{
var oPeople=document.getElementById('people');
var oSale=document.getElementById('sale');
var oReputation=document.getElementById('reputation');
var oPrice=document.getElementById('price');


var oUl = document.getElementById('list')
var aLi = oUl.getElementsByTagName('li')
var aPrice=document.getElementsByTagName('strong');//价格
var aReputation=document.getElementsByTagName('b');//信誉
var aImg=document.getElementsByTagName('dd');//图片
var aSale=document.getElementsByTagName('em');//销量
var aPeople=document.getElementsByTagName('span');//人气
var oClick=document.getElementById('click');
var oClick2=document.getElementById('click2');
var oClick3=document.getElementById('click3');
var oClick4=document.getElementById('click4');
var oBtn=oUl.getElementsByTagName('input');
//alert(oBtn[3].value);

var one=0;
oClick.onclick=function()
{
one++;

document.getElementById('pop').innerHTML=one;


}
var two=0;
oClick2.onclick=function()
{
two++;

document.getElementById('pop2').innerHTML=two;


}
var three=0;
oClick3.onclick=function()
{
three++;

document.getElementById('pop3').innerHTML=three;


}

var four=0;
oClick4.onclick=function()
{
four++;

document.getElementById('pop4').innerHTML=four;


}
//以上是点击人气＋1，想知道有什么简便的方法写呢

oSale.onclick=function(){//点击销量排行按钮
var b=[];
for(var i=0;i<aLi.length-1;i++)
{
for (var j = 0; j < aLi.length - 1 - i; j++) {
//var aa = aLi[j].getElementsByTagName("em")[0].innerHTML ;
//var bb = aLi[j+1].getElementsByTagName("em")[0].innerHTML ;
var aa=aSale[j].innerHTML;
var bb=aSale[j+1].innerHTML;

if (parseInt(aa) < parseInt(bb)) {
var dd=aImg[j+1].id;
var b=aReputation[j+1].innerHTML;
var strong=aPrice[j+1].innerHTML;
var em=aSale[j+1].innerHTML;
var span=aPeople[j+1].innerHTML;
var spanid=aPeople[j+1].id;
var input = oBtn[j+1];
//var inputid = oBtn[j+1].id ;

aImg[j+1].id=aImg[j].id
aReputation[j+1].innerHTML=aReputation[j].innerHTML;
aPrice[j+1].innerHTML=aPrice[j].innerHTML;
aSale[j+1].innerHTML=aSale[j].innerHTML;
aPeople[j+1].innerHTML=aPeople[j].innerHTML;
aPeople[j+1].id=aPeople[j].id;
oBtn[j+1] =oBtn[j] ;
//oBtn[j+1].id =oBtn[j].id;

aImg[j].id = dd;
aReputation[j].innerHTML= b;
aPrice[j].innerHTML = strong;
aSale[j].innerHTML = em;
aPeople[j].innerHTML= span;
aPeople[j].id= spanid;
oBtn[j] = input;
//oBtn[j].id= inputid;

}

}
}

}
...全文
164 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
想学好js的过气设计师 2017-05-16
  • 打赏
  • 举报
 回复
引用 5楼miaoch 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>With Statement Example 1</title>
</head>
<body>
<input type="button" value="按人气排" id="people"/>
<input type="button" value="按人销量排" id="sale"/>
<input type="button" value="按信誉排" id="reputation"/>
<input type="button" value="按价格排" id="price"/>
<select><option >按人气排</option>
    <option >按人销量排</option>
    <option >按信誉排</option>
    <option >按价格排</option></select>
<ul id="list">
    <li>
        <dd id="img1"></dd><br />
        　信誉：<b>3</b>
        <br />
        　¥<strong>123</strong><br />
        　销量：<em>34</em><br />
        　人气:<span id="pop">0</span>
        <input type="button" value="座椅1加人气"/>
    </li>
    <li>
        <dd id="img2"></dd ><br />
        　信誉：<b>5</b>
        <br />
        　¥<strong>13</strong><br />
        　销量：<em>35</em><br />
        　人气:<span id="pop2">0</span>
        <input type="button" value="电脑1加人气"/>
    </li>
    <li>
        <dd id="img3"></dd><br />
        　信誉：<b>8</b>
        <br />
        　¥<strong>53</strong><br />
        　销量：<em>134</em><br />
        　人气:<span id="pop3">0</span>
        <input type="button" value="手机1加人气"/>
    </li>
    <li>
        <dd id="img4"></dd><br />
        　信誉：<b>1</b>
        <br />
        　¥<strong>883</strong><br />
        　销量：<em>24</em><br />
        　人气:<span id="pop4">0</span>
        <input type="button" value="纸巾1加人气"/>
    </li>

</ul>
</body>
<script>
window.onload = function() {
    var list = document.getElementById("list");
    var buttons = list.getElementsByTagName("input");
    for (var i=0,len=buttons.length;i<len;i++) {
        buttons[i].onclick = add;
    }
    function add() {
        var span = this.previousSibling;
        while (span.nodeType != 1) {//很可能取到空行文本节点
            span = span.previousSibling;
        }
        var rq = parseInt(span.innerHTML);
        span.innerHTML = rq + 1;
    }
    var sale = document.getElementById("sale");
    var aSale = document.getElementsByTagName("em");
    var li = list.getElementsByTagName("li");
    sale.onclick = function () {
        for (var i=0;i<len - 1;i++) {
            for (var j=0;j<len - 1;j++) {
                var aa=aSale[j].innerHTML;
                var bb=aSale[j+1].innerHTML;
                if (parseInt(aa) < parseInt(bb)) {
                    //切换li的位置,将li j->li j+1
                    list.insertBefore(li[j+1], li[j]);
                }
            }
        }
    }
}
</script>
</html>
谢谢大神～
想学好js的过气设计师 2017-05-16
  • 打赏
  • 举报
 回复
引用 5楼miaoch 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>With Statement Example 1</title>
</head>
<body>
<input type="button" value="按人气排" id="people"/>
<input type="button" value="按人销量排" id="sale"/>
<input type="button" value="按信誉排" id="reputation"/>
<input type="button" value="按价格排" id="price"/>
<select><option >按人气排</option>
    <option >按人销量排</option>
    <option >按信誉排</option>
    <option >按价格排</option></select>
<ul id="list">
    <li>
        <dd id="img1"></dd><br />
        　信誉：<b>3</b>
        <br />
        　¥<strong>123</strong><br />
        　销量：<em>34</em><br />
        　人气:<span id="pop">0</span>
        <input type="button" value="座椅1加人气"/>
    </li>
    <li>
        <dd id="img2"></dd ><br />
        　信誉：<b>5</b>
        <br />
        　¥<strong>13</strong><br />
        　销量：<em>35</em><br />
        　人气:<span id="pop2">0</span>
        <input type="button" value="电脑1加人气"/>
    </li>
    <li>
        <dd id="img3"></dd><br />
        　信誉：<b>8</b>
        <br />
        　¥<strong>53</strong><br />
        　销量：<em>134</em><br />
        　人气:<span id="pop3">0</span>
        <input type="button" value="手机1加人气"/>
    </li>
    <li>
        <dd id="img4"></dd><br />
        　信誉：<b>1</b>
        <br />
        　¥<strong>883</strong><br />
        　销量：<em>24</em><br />
        　人气:<span id="pop4">0</span>
        <input type="button" value="纸巾1加人气"/>
    </li>

</ul>
</body>
<script>
window.onload = function() {
    var list = document.getElementById("list");
    var buttons = list.getElementsByTagName("input");
    for (var i=0,len=buttons.length;i<len;i++) {
        buttons[i].onclick = add;
    }
    function add() {
        var span = this.previousSibling;
        while (span.nodeType != 1) {//很可能取到空行文本节点
            span = span.previousSibling;
        }
        var rq = parseInt(span.innerHTML);
        span.innerHTML = rq + 1;
    }
    var sale = document.getElementById("sale");
    var aSale = document.getElementsByTagName("em");
    var li = list.getElementsByTagName("li");
    sale.onclick = function () {
        for (var i=0;i<len - 1;i++) {
            for (var j=0;j<len - 1;j++) {
                var aa=aSale[j].innerHTML;
                var bb=aSale[j+1].innerHTML;
                if (parseInt(aa) < parseInt(bb)) {
                    //切换li的位置,将li j->li j+1
                    list.insertBefore(li[j+1], li[j]);
                }
            }
        }
    }
}
</script>
</html>
哇。原来换li是这么换的。学习
miaoch 2017-05-16
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>With Statement Example 1</title>
</head>
<body>
<input type="button" value="按人气排" id="people"/>
<input type="button" value="按人销量排" id="sale"/>
<input type="button" value="按信誉排" id="reputation"/>
<input type="button" value="按价格排" id="price"/>
<select><option >按人气排</option>
    <option >按人销量排</option>
    <option >按信誉排</option>
    <option >按价格排</option></select>
<ul id="list">
    <li>
        <dd id="img1"></dd><br />
        　信誉：<b>3</b>
        <br />
        　¥<strong>123</strong><br />
        　销量：<em>34</em><br />
        　人气:<span id="pop">0</span>
        <input type="button" value="座椅1加人气"/>
    </li>
    <li>
        <dd id="img2"></dd ><br />
        　信誉：<b>5</b>
        <br />
        　¥<strong>13</strong><br />
        　销量：<em>35</em><br />
        　人气:<span id="pop2">0</span>
        <input type="button" value="电脑1加人气"/>
    </li>
    <li>
        <dd id="img3"></dd><br />
        　信誉：<b>8</b>
        <br />
        　¥<strong>53</strong><br />
        　销量：<em>134</em><br />
        　人气:<span id="pop3">0</span>
        <input type="button" value="手机1加人气"/>
    </li>
    <li>
        <dd id="img4"></dd><br />
        　信誉：<b>1</b>
        <br />
        　¥<strong>883</strong><br />
        　销量：<em>24</em><br />
        　人气:<span id="pop4">0</span>
        <input type="button" value="纸巾1加人气"/>
    </li>

</ul>
</body>
<script>
window.onload = function() {
    var list = document.getElementById("list");
    var buttons = list.getElementsByTagName("input");
    for (var i=0,len=buttons.length;i<len;i++) {
        buttons[i].onclick = add;
    }
    function add() {
        var span = this.previousSibling;
        while (span.nodeType != 1) {//很可能取到空行文本节点
            span = span.previousSibling;
        }
        var rq = parseInt(span.innerHTML);
        span.innerHTML = rq + 1;
    }
    var sale = document.getElementById("sale");
    var aSale = document.getElementsByTagName("em");
    var li = list.getElementsByTagName("li");
    sale.onclick = function () {
        for (var i=0;i<len - 1;i++) {
            for (var j=0;j<len - 1;j++) {
                var aa=aSale[j].innerHTML;
                var bb=aSale[j+1].innerHTML;
                if (parseInt(aa) < parseInt(bb)) {
                    //切换li的位置,将li j->li j+1
                    list.insertBefore(li[j+1], li[j]);
                }
            }
        }
    }
}
</script>
</html>
想学好js的过气设计师 2017-05-16
  • 打赏
  • 举报
 回复
引用 1楼miaoch 的回复:

var oBtn = oUl.getElementsByTagName('input');
var input = oBtn[j + 1];
oBtn[j + 1] = oBtn[j];
oBtn[j] = input;
上面是你想要切换按钮的几句关键代码。按钮是一个元素，也就是一个对象，又不是一个值，这样肯定是换不了的。 如果你想切换这两个元素的位置，因为这是冒泡排序，你只要把前一个元素移动到他的后一个的后面就行了对不对？ 所以后三句代码可以去掉，就加一句 

                    //记下oBtn[j]的位置
                    var j0_next = oBtn[j].nextSibling;//
                    var j0_parent = oBtn[j].parentNode;//
                    //把j放倒j+1的前面
                    oBtn[j+1].parentNode.insertBefore(oBtn[j], oBtn[j+1]);
                    //因为是放在前面所以不影响下标
                    j0_parent.insertBefore(oBtn[j+1],j0_next);
不过即使是这样，这些代码的问题依旧存在，因为oBtn这个类数组是动态的，它不是说你改下标的值而变化，它是根据DOM结构的变化而变化，虽然可能现在没有什么问题，但是还是不要这样写代码
原来是这样！谢谢大神
miaoch 2017-05-16
  • 打赏
  • 举报
 回复
还有更简单的思路就是切换几个li就行了。。等下给你上代码
miaoch 2017-05-16
  • 打赏
  • 举报
 回复
还有一种思路就是互换按钮的点击事件
miaoch 2017-05-16
  • 打赏
  • 举报
 回复 

var oBtn = oUl.getElementsByTagName('input');
var input = oBtn[j + 1];
oBtn[j + 1] = oBtn[j];
oBtn[j] = input;
上面是你想要切换按钮的几句关键代码。按钮是一个元素，也就是一个对象，又不是一个值，这样肯定是换不了的。 如果你想切换这两个元素的位置，因为这是冒泡排序，你只要把前一个元素移动到他的后一个的后面就行了对不对？ 所以后三句代码可以去掉，就加一句 

                    //记下oBtn[j]的位置
                    var j0_next = oBtn[j].nextSibling;//
                    var j0_parent = oBtn[j].parentNode;//
                    //把j放倒j+1的前面
                    oBtn[j+1].parentNode.insertBefore(oBtn[j], oBtn[j+1]);
                    //因为是放在前面所以不影响下标
                    j0_parent.insertBefore(oBtn[j+1],j0_next);
不过即使是这样，这些代码的问题依旧存在，因为oBtn这个类数组是动态的，它不是说你改下标的值而变化，它是根据DOM结构的变化而变化，虽然可能现在没有什么问题，但是还是不要这样写代码
电信设备-一键发出求救报警短信的方法.zip
在这个“电信设备-一键发出求救报警短信的方法”资料中，我们将深入探讨如何利用特定的电信设备功能来快速发送求救信息，特别是在紧急情况下。 一键求救报警短信功能是一种安全服务，它允许用户通过简单的操作，如...
Android-一键求救app
5. **Intent服务**：使用Intent来启动短信发送服务，即使应用在后台运行也能继续执行求救操作。 6. **异步处理**：考虑到求救过程可能涉及网络通信，应使用异步任务或IntentService避免阻塞主线程。 二、短信服务...
电信设备-具有紧急求救功能的移动终端及其紧急求救方法.zip
《电信设备-具有紧急求救功能的移动终端及其紧急求救方法》这一主题涉及的是现代通信技术中的一个重要领域，即安全通信与应急响应。在这个快速发展的科技时代，移动终端不仅是我们日常生活和工作的重要工具，还在...
基于Android的紧急求救App的设计与实现.pdf
2. **预设短信自动发送**：当用户触发SOS求救按钮，App会自动将预先编辑的短信内容与当前定位信息结合，发送给预设的紧急联系人。短信内容可以设置为加密形式，只有紧急联系人能理解，确保信息的安全性。 3. **地图...
网络游戏-基于GPS网络的自助求救方法及系统.zip
标题中的“网络游戏-基于GPS网络的自助求救方法及系统”揭示了这个主题涉及的是网络游戏领域内的一种安全机制，特别是利用全球定位系统（GPS）来实现玩家的自助求救功能。这种系统通常是为了提高在线游戏的安全性，...
JavaScript

87,993

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章