select框应该是被观察者，而且其他的div发现他改动了，那么就做出相应变化，所以其他div是观察者，一旦select做出改动，应该通知其他的观察者
<body>
<select id='observed' >
<option value='减肥'>减肥广告</option>
<option value='游戏'>页游广告</option>
</select>
<div id='ink' style="width: 100px;height: 100px;background-color: pink;"></div>
<div id='pul' style="width: 100px;height: 100px;background-color: purple;"></div>
<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
<script>
var seleted = document.getElementById('observed');
seleted.observes = {};
seleted.attach = function(k,v)
{
seleted.observes[k] = v;
}
seleted.detach = function(k)
{
delete selected.observes[k];
}
seleted.onchange = seleted.notify = function()
{
for(var key in this.observes)
{
console.log(key);
console.log(this.observes)
this.observes[key].upd(this);
}
}
document.getElementById('ink').upd = function(observes)
{
console.log(observes)
if(observes.value == '减肥')
{
this.innerHTML= '减肥广告'
}else if(observes.value == '游戏')
{
this.innerHTML='是兄弟就来砍我'
}
}
document.getElementById('pul').upd = function(observes)
{
if(observes.value == '减肥')
{
this.innerHTML='减肥广告'
}else if(observes.value == '游戏')
{
this.innerHTML = '是兄弟就来砍我'
}
}
seleted.attach('pul',document.getElementById('pul'))
seleted.attach('ink',document.getElementById('ink'))
</script>
</body>
网友评论